1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. div{ margin:20px 0 20px 20px;}
  8.  
  9. .a{width:0; height:0; line-height:0; border-width:10px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
  10.  
  11. .b{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
  12.  
  13. .c{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
  14.  
  15. .d{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
  16.  
  17. .e{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}
  18.  
  19. .f{width:0; height:0; line-height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
  20.  
  21. </style>
  22.  
  23. </head>
  24.  
  25. <body>
  26. <div class="a"></div>
  27. <div class="b"></div>
  28. <div class="c"></div>
  29. <div class="d"></div>
  30. <div class="e"></div>
  31. <div class="f"></div>
  32.  
  33. </div>
  34.  
  35. </body>
  36. </html>

效果图：矩形框中依次渐变演示了最上面的那个图形的形成过程

　　

css模拟圆角（适合边框和背景一样的圆角，对精密程度要求不高的）

　　

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. /*div{ margin:20px 0 20px 20px;}*/
  8.  
  9. .box{width:500px;}
  10. .top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000; border-left:3px dotted transparent; border-right:3px dotted transparent;}
  11. .center{padding:10px 20px; color:white; font-size:14px; background:#cc0000;}
  12. .bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent; border-right:3px dotted transparent;}
  13.  
  14. </style>
  15.  
  16. </head>
  17.  
  18. <body>
  19.  
  20. <div class="box">
  21.     <div class="top"></div>
  22.     <div class="center">我是一只小小鸟、小小鸟！</div>
  23.     <div class="bot"></div>
  24. </div>
  25.  
  26. </div>
  27.  
  28. </body>
  29. </html>

效果图：

　    　

把div的边距拉大后会看的更清楚哦

　　

改进：

　　

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. .fl{ float:left;}
  8.  
  9. .box{width:400px; margin:200px auto;}
  10. .box .right .top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000; border-left:3px dotted transparent; border-right:3px dotted transparent;}
  11. .box .right .center{padding:100px 20px; color:white; font-size:14px; background:#cc0000;}
  12. .box .right .bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent; border-right:3px dotted transparent;}
  13.  
  14. .box .left{ width:0; height:0; line-height:0; margin-top:20px;  border-top:10px solid white; border-right:20px solid #cc0000; border-bottom:10px solid white;  border-left:10px solid white;}
  15.  
  16. </style>
  17.  
  18. </head>
  19.  
  20. <body>
  21.  
  22. <div class="box">
  23.     <div class="left fl"></div>
  24.     <div class="right fl">
  25.         <div class="top"></div>
  26.             <div class="center">我是一只小小鸟、小小鸟！</div>
  27.         <div class="bot"></div>
  28.     </div>
  29.     <div style="clear:both;"></div>
  30. </div>
  31.  
  32. </div>
  33.  
  34. </body>
  35. </html>

效果图：

　　

原文地址：http://www.zhangxinxu.com/wordpress/?p=794

　　

CSS border 生成三角的更多相关文章

  1. 利用css中的border生成三角，兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  2. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  3. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  4. div+css做出带三角的弹出框 和箭头

    一.三角形 https://blog.csdn.net/Szu_AKer/article/details/51755821 notice:三角的那部分可以用图片作为背景,但是容易出现杂边.所以利用cs ...

  5. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  6. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  7. css border

    CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...

  8. border做三角符号

    用border做三角符号以及其他图形 ;; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffff ...

  9. 【css样式生成 & 图片合并压缩工具】Sprite，你值得拥有

    好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...

随机推荐

  1. SCOJ 4484 The Graver Robbers' Chronicles 后缀自动机

    4484: The Graver Robbers' Chronicles 题目连接: http://acm.scu.edu.cn/soj/problem.action?id=4484 Descript ...

  2. CodeM资格赛2

    题目描述 组委会正在为美团点评CodeM大赛的决赛设计新赛制. 比赛有 n 个人参加(其中 n 为2的幂),每个参赛者根据资格赛和预赛.复赛的成绩,会有不同的积分.比赛采取锦标赛赛制,分轮次进行,设某 ...

  3. Tasker 正则表达式测试器

    http://tieba.baidu.com/p/3533498043 本次分享的是一个正则表达式测试工具,用来方便快捷的进行Tasker正则方面的测试,一些比较复杂的匹配需要进行多次尝试才可能正确匹 ...

  4. IDA resources - Script, Plugin, Project, Book, Tutorial

    https://www.hex-rays.com/forum/viewtopic.php?f=6&t=3322 List of scripts:http://www.openrce.org/d ...

  5. shiro+redis实现session共享

    shiro配置内容

  6. DELPHI PROTOBUF免费的开源支持库fundamentals5

    DELPHI PROTOBUF免费的开源支持库fundamentals5 1.源码URL: https://github.com/fundamentalslib/fundamentals5 2.编译P ...

  7. QMsgPack简介

    QMsgPack简介 首先,关于MessagePack协议,访问http://msgpack.org可以了解详细的格式约定及各种语言的实现. MessagePack协议号称比JSON快,但速度的快慢这 ...

  8. 【docker】【mysql】docker安装mysql，阿里云docker镜像加速器，docker搜索查看远程仓库上的镜像，docker拉取镜像，查看本地所有镜像，查看容器的运行状况，查看容器的详细信息

    在docker上安装mysql有两种方式 1.通过Dockerfile构建 2.直接在docker hub上拉取镜像安装 =================本篇采用方法2=============== ...

  9. 【java web】java运行预编译Groovy脚本

    在JVM中执行Groovy类有两种方式: 使用Groovy编译全部的*.groovy为java的*.class文件,把这些*.class文件放在java类路径中,通过java类载入器来载入这些类. 通 ...

  10. Cookie && Session之验证实例

    为了防止各种自动登录,以及反作弊和破坏,往往会要求登录时让用户输入随机产生的验证码(这组验证码是一组数字和字母),这样可以起到一定的防止他人利用程序让机器自动反复登录的情况.在PHP下要实现这种功能是 ...