html中带描边的三角怎么写,如何用css3绘制有边框的三角形

若吾皇

如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。　　最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。　　这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下，当定位都为0(left:0px; top:0px;)时，会发生什么。　　HTML：　　　　

　　　　　　

　　 三角形　　

　　 纯CSS写带边框的三角形　　

　　

　　CSS：　　.test_triangle_border{　　width:200px;　　margin:0 auto 20px;　　position:relative;　　}　　.test_triangle_border a{　　color:#333;　　font-weight:bold;　　text-decoration:none;　　}　　.test_triangle_border .popup{　　width:100px;　　background:#fc0;　　padding:10px 20px;　　color:#333;　　border-radius:4px;　　position:absolute;　　top:30px;　　left:30px;　　border:1px solid #333;　　}　　.test_triangle_border .popup span{　　display:block;　　width:0;　　height:0;　　border-width:0 10px 10px;　　border-style:solid;　　border-color:transparent transparent #333;　　position:absolute;　　top:-10px;　　left:50%;/* 三角形居中显示 */　　margin-left:-10px;/* 三角形居中显示 */　　}　　.test_triangle_border .popup em{　　display:block;　　width:0;　　height:0;　　border-width:0 10px 10px;　　border-style:solid;　　border-color:transparent transparent #fc0;　　position:absolute;　　top:1px;　　left:-10px;　　}　　(2)东北、东南、西北、西南三角形的写法　　继续，来写西北方()，东北方()，西南方()，东南方()的三角形。　　原理如图：　　根据颜色的划分，每个可以有两种CSS来写，分别利用不同的边来创造所需三角形。　　写一个nw()的例子：　　HTML：　　1