Since the release of css3, its functions have become very powerful. Many icons that require images have been used in the past. Now, only a few pieces of css code are required. The following are circles, ovans, triangles, and arrow icons created by css. Circle:
.yuan{ width:100px; height:100px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:red;}
Elliptic
.oval { width: 200px; height: 100px; background-color: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
Arrow:
.arrow{ content: ''; position: absolute; width: 30px; height: 30px; border: 10px solid #f5b24a; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); border-top: none; border-right: none; top: 9px;}
Triangle:
.rencentle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}