無為 2017-07-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3实现各种形状</title> <style type="text/css"> div{ display:inline-block; } #circle{ height: 120px; width: 120px; background-color: chocolate; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } #oval{ /*椭圆形*/ width: 200px; height: 100px; background-color: cornflowerblue; /*两种设置方式 / 号之前的数字代表水平半径 之后的数字代表垂直半径*/ /*-moz-border-radius: 100px/50px;*/ /*-webkit-border-radius: 100px/50px;*/ /*border-radius: 100px/50px;*/ /*代表圆的半径 纵向横向都是50%*/ -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #triangle-orign{ /*三角形原理*/ width: 100px; height: 100px; background-color: black; border-top: 140px solid #113322; border-left: 140px solid #4400ff; border-right: 140px solid crimson ; border-bottom: 140px solid lightseagreen; } #triangle{ /*三角形*/ width: 0; height: 0; border-bottom: 140px solid #8855ff; border-left:70px solid transparent; border-right: 70px solid transparent; } #triangle-down{ /*朝下的三角形*/ width: 0; height: 0; border-top: 140px solid blue; border-left: 70px solid transparent; border-right: 70px solid transparent; } #triangle-left{ width: 0px; height: 0px; border-left: 140px solid coral; border-top: 70px solid transparent; border-bottom: 70px solid transparent; } #triangle-right{ width: 0px; height: 0px; border-right: 140px solid magenta; border-top: 70px solid transparent; border-bottom: 70px solid transparent; } </style> </head> <body> <div id="shapes"> <!--圆形--> <div id="circle"></div> <!--椭圆--> <div id="oval"></div> <!--三角形原型--> <div id="triangle-orign"></div> <!--三角形--> <div id="triangle"></div> <div id="triangle-down"></div> <div id="triangle-left"></div> <div id="triangle-right"></div> </div> </body> </html>