CSS制作三角形的方法

CSS制作三角形的方法

 

把元素定义成块级0大小(0宽0高0字号0行高)后, 通过改变元素的border-color和border-width实现

<style>
.angle {
 margin:50px 25px;
 padding:0px;
 position:relative;
 z-index:1;
 background-color:rgb(51,88,159);
 width:500px;
 height:150px;
 color:rgb(255,255,255);
 text-align:center;
 line-height:150px;
 font-size:14px}
</style>



<div class="angle">
<span class="top" style="position:absolute; z-index:0; border-style:solid; width:0px; height:0px; line-height:0; font-size:0px; border-width:0px 20px 20px ; border-color:transparent transparent rgb(51,88,159); left:100px; top:-20px"></span>

test1234567890
</div>