Css自娱自乐

昔人已老

2016-12-29

*、以下纯属自娱自乐，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>

啊哈~

border css