CSS3常用形状
CSS3常用形状实现代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{width:100px; height:100px; background:#f00; margin:50px; text-align:center; line-height:100px;} 8 .box{border-radius:50%;} 9 .semi-circle{ 10 border-radius:100px 100px 0 0; 11 height:50px; 12 } 13 .sector{ 14 border-radius:100px 0 0 0; 15 } 16 .arc{ 17 border-radius:100px 0; 18 -webkit-transform:rotate(45deg); 19 -ms-transform:rotate(45deg); 20 -o-transform:rotate(45deg); 21 transform:rotate(45deg); 22 } 23 .triangle{ 24 background: none; 25 width: 0; 26 height: 0; 27 border: 50px solid #f00; 28 border-color: #f00 transparent transparent transparent; 29 } 30 .rectangle{ 31 width: 200px; 32 border-radius:15px; 33 position: relative; 34 } 35 .rectangle::first-letter{ 36 color: #fff; 37 } 38 .rectangle::before{ 39 content: ""; 40 width: 0; 41 height: 0; 42 border: 15px solid #f00; 43 border-color:transparent transparent transparent #0f0; 44 45 position: absolute; 46 right: -30px; 47 top: 35px; 48 } 49 .heart{ 50 background: none; 51 width: 100px; 52 height: 100px; 53 position: relative; 54 } 55 .heart::before,.heart::after{ 56 content: ""; 57 width: 100%; 58 height: 150px; 59 background-color: #f00; 60 position: absolute; 61 border-radius: 100px 100px 0 0; 62 } 63 .heart::before{ 64 -webkit-transform:rotate(-45deg); 65 -ms-transform:rotate(-45deg); 66 -o-transform:rotate(-45deg); 67 transform:rotate(-45deg); 68 } 69 .heart::after{ 70 -webkit-transform:rotate(45deg); 71 -ms-transform:rotate(45deg); 72 -o-transform:rotate(45deg); 73 transform:rotate(45deg); 74 left: 85px; 75 } 76 .boxF,.boxS,.boxT{ 77 margin: 0; 78 visibility: hidden;/* 隐藏元素 占位置 */ 79 } 80 .boxF{ 81 width: 200px; 82 height: 250px; 83 margin: 200px; 84 background-color: #f00; 85 -webkit-transform:rotate(120deg); 86 -ms-transform:rotate(120deg); 87 -o-transform:rotate(120deg); 88 transform:rotate(120deg); 89 } 90 .boxS{ 91 width: 100%; 92 height: 100%; 93 background-color: #0f0; 94 -webkit-transform:rotate(-60deg); 95 -ms-transform:rotate(-60deg); 96 -o-transform:rotate(-60deg); 97 transform:rotate(-60deg); 98 } 99 .boxT{ 100 width: 100%; 101 height: 100%; 102 background-color: #00f; 103 visibility: visible; 104 -webkit-transform:rotate(-60deg); 105 -ms-transform:rotate(-60deg); 106 -o-transform:rotate(-60deg); 107 transform:rotate(-60deg); 108 } 109 .boxF,.boxS{ 110 overflow: hidden; 111 } 112 </style> 113 </head> 114 <body> 115 <div>正方形</div> 116 <div class="box">圆形</div> 117 <div class="semi-circle">半圆</div> 118 <div class="sector">扇形</div> 119 <div class="arc">弧形</div> 120 <div class="triangle"></div> 121 <div class="rectangle">特效效果</div> 122 <div class="heart"></div> 123 <div class="boxF"> 124 <div class="boxS"> 125 <div class="boxT"></div> 126 </div> 127 </div> 128 </body> 129 </html>