*、以下纯属自娱自乐,O(∩_∩)O哈哈~
<!DOCTYPE html>
<html>
<head>
<title>Css小娱乐</title>
<style>
.div_egg {
width: 100px;
height: 50px;
background-color: yellow;
border-radius:38% 62% 62% 38%/ 50% 50% 50% 50%;
}
.div_triangle {
width: 0px;
height: 0px;
border-left: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.div_other_triangle {
width: 200px;
height: 0px;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 100px auto;
}
#hexagon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid yellow;
}
#hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid aqua;
}
/*
#sixangle {
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid yellow;
margin: 10px auto;
}
#sixangle:after {
content: "";
//content插入内容
width: 0;
height: 0;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid yellow;
margin: 60px 0 0 -100px;
}*/
#star{
width: 0px;
height: 0px;
margin: 50px 0;
color: red;
position: relative;
display: block;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
-webkit-transform: rotate(35deg);
}
#star:before{
content: '';
width: 0px;
height: 0px;
margin: 50px 0;
color: yellow;
position: relative;
display: block;
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-webkit-transform: rotate(-35deg);
top: -45px;
left: -65px;
}
#star:after{
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
* {
margin: 0px;
padding: 0px;
}
div {
margin: 100px;
}
#comment_bubble {
width: 300px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#comment_bubble:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body style="background:black;">
<table border="1">
<tr><td style="color:green;">我像鸡蛋吗?</td><td><div class="div_egg"></div></td></tr>
<tr><td style="color:green;">我是三角形哦!</td><td><div class="div_triangle"></div></td></tr>
<tr><td style="color:green;">还是三角</td><td><div class="div_other_triangle"></div></td></tr>
<tr><td style="color:green;">多边形</td><td><div id="hexagon"></div></td></tr>
<tr><td style="color:green;">六角星</td><td>被雪藏了<div id="sixangle"></div></td></tr>
<tr><td style="color:green;">小星星</td><td><div id="star"></div></td></tr>
<tr><td style="color:green;">提示框</td><td><div id="comment_bubble"></div></td></tr>
</body>
</html>
啊哈~