CSS 画三角形、圆

         <div class="square"></div>
         <style>
             .square {
                 height: 0px;
                 width: 0px;
                 border-bottom: 50px solid #006633;
                 border-left: 50px solid transparent;
                 border-right: 50px solid transparent;
             }
         </style>

三角形

         <div class="circle">
             <div>2</div>
             <div>2</div>
             <div>2</div>
         </div>
         <style>
             .circle :first-child {
                 width: 200px;
                 height: 200px;
                 background-color: #a72525;
                 -webkit-border-radius: 100px;
                 color: #fff;
                 font-size: 150px;
                 text-align: center;
                 line-height: 200px;
             }
             .circle :nth-child(2) {
                 width: 200px;
                 height: 200px;
                 background-color: transparent;
                 -webkit-border-radius: 100px;
                 border: 3px solid #00BC9B;
                 color: #126856;
                 font-size: 150px;
                 text-align: center;
                 line-height: 200px;
             }
             .circle :nth-last-child(1) {
                 width: 200px;
                 height: 200px;
                 background-color: transparent;
                 -webkit-border-radius: 100px;
                 border: 3px dashed #00BC9B;
                 color: #126856;
                 font-size: 150px;
                 text-align: center;
                 line-height: 200px;
             }
         </style>

画圆

text-shadow：设置字体阴影。