css 實現一些圖形

標籤：ott   img   空間   ati   .com   圖片   for   tran   position   

css做的一些圖形。

要先理解一個基礎：css邊框相接觸的地方是45度平分空間的。

#k{      width: 20px;      height: 30px;      border: 40px solid;      border-color: red green yellow blue;    }

 

圖形一：

 1 #talkbubble {  2       width: 120px;  3       height: 80px;  4       background: red;  5       position: relative;  6       }  7       #talkbubble:before {  8         content:""; 9         position: absolute; 10         right: 100%; 11         top: 0px; 12         width: 0; 13         height: 0; 14         border-top: 40px solid transparent; 15         border-right: 80px solid red; 16         border-bottom: 40px solid transparent; 17       }18       #talkbubble:after { 19         content:"";20         position: absolute; 21         left: 100%; 22         top: 0px; 23         width: 0; 24         height: 0; 25         border-top: 40px solid transparent; 26         border-left: 80px solid red; 27         border-bottom: 40px solid transparent; 28       }

 

css 實現一些圖形