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>
时间： 2024-10-10 21:17:42