Css Shaps example

来源：互联网发布：模架编程流程编辑：程序博客网时间：2024/06/12 01:34

五角星：

<html> <head> <style type="text/css"> div[id="stern"] { margin: 50px 0; top:50px; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(35deg); } div[id="stern"]:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); } div[id="stern"]:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); content: ''; } </style> </head> <body> <div id="stern" > </div> <div id="sterns" ></div> </body> </html>

上半圆：

<html> <head> <style type="text/css"> div{  height:45px;      width: 90px;      border-radius: 90px 90px 0 0;      -moz-border-radius: 90px 90px 0 0;      -webkit-border-radius: 90px 90px 0 0;      background:green;  } </style>  </head><body> <div id="stern" > </div><div id="sterns" ></div></body></html>