Css Shaps example

最新推荐文章于 2024-10-09 19:18:32 发布

alanhome2003

最新推荐文章于 2024-10-09 19:18:32 发布

阅读量464

点赞数

分类专栏： Css2/Css3 文章标签： css div html

Css2/Css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

五角星：

<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>