今天在网上看到一个非常好玩的写法,教人怎样用css话三角形。内容其实很简单,难的是能想出来,并且巧妙地利用好。
我用这种写法画了一个图:
css是这样写的:
<style tyepe="text/css"> .box{ width:0px; height:0px; border-bottom:50px solid red; border-left:50px solid black; border-top:50px solid green; border-right:50px solid blue; } </style>
利用这种写法,你可以做出这样的效果出来:
具体css如下:
1 <html> 2 <head> 3 <style tyepe="text/css"> 4 5 .box{ 6 width:300px; 7 height:100px; 8 background-color:gray; 9 border:1px solid gray; 10 } 11 .triangle{ 12 top:100px; 13 margin-left:15px; 14 width:0px; 15 height:0px; 16 border-bottom:10px solid white; 17 border-left:10px solid white; 18 border-top:10px solid gray; 19 border-right:10px solid white; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="box"></div> 25 <div class="triangle"/> 26 </body> 27 </html>