css实现是什么样子的,详解css实现的各种形状的代码

New Document

#triangle-1{

width:0;

height:0;

border-left:50px solid transparent;

border-right:50px solid transparent;

border-bottom:100px solid red;

}

#triangle-2{

width:0;

height:0;

border-left:100px solid transparent;

border-right:200px solid transparent;

border-bottom:100px solid purple;

position:absolute;

left:150px;

;

}

#triangle-3{

width:0;

height:0;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-right:100px solid red;

position:absolute;

left:300px;

}

#circle{

width:100px;

height:100px;

background:blue;

-webkit-border-radius:50px;

-moz-border-radius:50px;

border-radius:50px;

position:absolute;

top:200px;

}

#tixing-1{

width:30px;

height:0;

border-left:50px solid transparent;

border-right:50px solid transparent;

border-bottom:100px solid gray;

position:absolute;

top:300px;

left:200px;

}