CSS实现各种形状示例

来源:转载

<!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 > <!--圆形--> <div ></div> <!--椭圆--> <div ></div> <!--三角形原型--> <div ></div> <!--三角形--> <div ></div> <div ></div> <div ></div> <div ></div> </div></body></html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: