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：设置字体阴影。