CSS 画三角形、圆

 1         <div class="square"></div>
 2         <style>
 3             .square {
 4                 height: 0px;
 5                 width: 0px;
 6                 border-bottom: 50px solid #006633;
 7                 border-left: 50px solid transparent;
 8                 border-right: 50px solid transparent;
 9             }
10         </style>

三角形

 1         <div class="circle">
 2             <div>2</div>
 3             <div>2</div>
 4             <div>2</div>
 5         </div>
 6         <style>
 7             .circle :first-child {
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: #a72525;
11                 -webkit-border-radius: 100px;
12                 color: #fff;
13                 font-size: 150px;
14                 text-align: center;
15                 line-height: 200px;
16             }
17             .circle :nth-child(2) {
18                 width: 200px;
19                 height: 200px;
20                 background-color: transparent;
21                 -webkit-border-radius: 100px;
22                 border: 3px solid #00BC9B;
23                 color: #126856;
24                 font-size: 150px;
25                 text-align: center;
26                 line-height: 200px;
27             }
28             .circle :nth-last-child(1) {
29                 width: 200px;
30                 height: 200px;
31                 background-color: transparent;
32                 -webkit-border-radius: 100px;
33                 border: 3px dashed #00BC9B;
34                 color: #126856;
35                 font-size: 150px;
36                 text-align: center;
37                 line-height: 200px;
38             }
39         </style>

画圆

text-shadow：设置字体阴影。