??如何绘制三角形及三角形的组合图案，以下是自己画的草图
源码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS利用transparent实现三角形状绘制</title> 6 <style type="text/css"> 7 .triangle-up { 8 width: 0; 9 height: 0; 10 border:solid 40px #00aabb; 11 border-left: solid 20px transparent; 12 border-right: solid 20px transparent; 13 border-top: 0; 14 } 15 .triangle-left { 16 width: 0; 17 height: 0; 18 border:solid 40px #00aabb; 19 border-top: solid 20px transparent; 20 border-bottom: solid 20px transparent; 21 border-left: 0; 22 } 23 /*梯形绘制*/ 24 .tripzoid-triangle { 25 width: 250px; 26 height: 0; 27 border:solid 40px #bb0090; 28 border-left: solid 20px transparent; 29 border-right: solid 20px transparent; 30 border-top: 0; 31 } 32 /*直角三角形绘制*/ 33 .right-triangle { 34 width: 0; 35 height: 0; 36 border-right: 100px solid #00aabb; 37 border-bottom: 100px solid transparent; 38 } 39 /*长条矩形与三角形*/ 40 .rectangle-triangle { 41 width:240px; 42 height: 0; 43 border:solid 40px #037753; 44 border-left: solid 20px transparent; 45 border-right: solid 20px transparent; 46 } 47 48 </style> 49 </head> 50 <body> 51 <div class="triangle-up">向上</div> 52 <div class="triangle-left">向左</div> 53 <div class="tripzoid-triangle">梯形绘制</div> 54 <div class="rectangle-triangle">长条矩形与三角形组合</div> 55 <div class="right-triangle">直角三角形</div> 56 </body> 57 </html>
利用伪类实现矩形+三角形组合
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用伪类实现矩形+三角形组合</title> 6 <style type="text/css"> 7 /*::before ::after绘制三角形*/ 8 .middle { 9 text-align: center; 10 } 11 .title { 12 background-color: #00aabb; 13 color:#fff; 14 display: inline-block; 15 width: 240px; 16 height: 45px; 17 line-height: 45px; 18 font-size: 18px; 19 position: relative; 20 } 21 .title:before { 22 width: 0; 23 height: 0; 24 border-left: solid 45px transparent; 25 border-top: solid 22.5px red; 26 border-bottom: solid 22.5px red; 27 position: absolute; 28 left: -45px; 29 content: ""; 30 } 31 32 .title:after { 33 width: 0; 34 height: 0; 35 border-right: solid 45px transparent; 36 border-top: solid 22.5px red; 37 border-bottom: solid 22.5px red; 38 position: absolute; 39 left: 240px; 40 content: ""; 41 } 42 43 </style> 44 </head> 45 <body> 46 <div class="middle"> 47 <h5 class="title">恭喜发财</h5> 48 </div> 49 </body> 50 </html>
利用CSS3中transparent实现三角形及三角形组合图
原文：http://www.cnblogs.com/zjf-1992/p/5965703.html
