1.效果
2.源码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><style type="text/css">#triangle_top{display: inline-block;width:0;height:0;border-left:50px solid transparent;border-right: 50px solid transparent;border-bottom:100px solid blue;}#triangle_bottom{display: inline-block;width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-top:100px solid blue;}#triangle_left{display: inline-block;width:0;height:0;border-bottom:50px solid transparent;border-top:50px solid transparent;border-right:100px solid blue;}#triangle_right{display: inline-block;width:0;height:0;border-bottom:50px solid transparent;border-top:50px solid transparent;border-left:100px solid blue;}#right_triangle_top_left{display: inline-block;width:0;height:0;border-right:100px solid transparent;border-top:100px solid blue;}#right_triangle_top_right{display: inline-block;width:0;height:0;border-left:100px solid transparent;border-top:100px solid blue;}#right_triangle_bottom_left{display:inline-block;width:0;height:0;border-right:100px solid transparent;border-bottom:100px solid blue;}#right_triangle_bottom_right{display: inline-block;width:0;height:0;border-left:100px solid transparent;border-bottom:100px solid blue;}#circle{display: inline-block;width: 100px;height: 100px;background: blue;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}#oval{display: inline-block;width:100px;height:50px;background-color: blue;-webkit-border-radius:50px/25px;-moz-border-radius:50px/25px;border-radius:50px/25px;}#trapezium{display: inline-block;height: 0;width: 100px;border-bottom: 100px solid blue;border-left: 50px solid transparent;border-right: 50px solid transparent;}#parallelogram{display: inline-block;height: 100px;width: 100px;background-color: blue;-webkit-transform: skewX(30deg);-moz-transform: skewX(30deg);-ms-transform: skewX(30deg);-o-transform: skewX(30deg);transform: skewX(30deg);transform-origin: 0 0;}#star {width: 0;height: 0;display: inline-block;border-right: 100px solid transparent;border-left: 100px solid transparent;border-bottom: 70px solid red;-moz-transform: rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg);transform-origin: 80px 120px;}#star:before {content: '';height: 0;width: 0;display: inline-block;position: relative;top: -45px;left: -65px;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 80px solid red;-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-ms-transform: rotate(-35deg);-o-transform: rotate(-35deg);transform: rotate(-35deg);}#star:after{content: '';height:0;width:0;display: inline-block;position: relative;top: -78px;left: -105px;border-right: 100px solid transparent;border-left: 100px solid transparent;border-bottom: 70px solid red;-webkit-transform: rotate(-70deg);-moz-transform: rotate(-70deg);-ms-transform: rotate(-70deg);-o-transform: rotate(-70deg);transform: rotate(-70deg);}#star_six_points {width: 0;height: 0;position: relative;top: -50px;left: 50px;display: inline-block;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}#star_six_points:after{content: '';width:0;height:0;display: inline-block;position: absolute;top:35px;left:-50px;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}#hexagon{width:100px;height:50px;display: inline-block;position: relative;left: 80px;top: -50px;background-color: red;}#hexagon:before{content: '';width:0;height:0;display: inline-block;position: absolute;top: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid red;}#hexagon:after{content: '';width:0;height:0;display: inline-block;position: absolute;top: 50px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid red;}#heart {top:-120px;left: 120px;position: relative;display: inline-block;}#heart:before,#heart:after {content: "";width: 70px;height: 115px;position: absolute;background: red;display: inline-block;-webkit-border-radius: 50px 50px 0 0;-moz-border-radius: 50px 50px 0 0;border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}#heart:after {left: 32px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}#egg{width: 136px;height: 190px;position: relative;left: 260px;background: #ffc000;display: inline-block;-webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;-moz-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;}#infinity{width: 220px;height: 100px;position: relative;display: inline-block;left: 280px;}#infinity:before,#infinity:after {content: "";width: 60px;height: 60px;position: absolute;top: 0;left: 0;border: 20px solid #06c999;-moz-border-radius: 50px 50px 0 50px;border-radius: 50px 50px 0 50px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}#infinity:after {left: auto;right: 0;-moz-border-radius: 50px 50px 50px 0;border-radius: 50px 50px 50px 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}</style>
</head>
<body>
<div id="triangle_top"></div>
<div id="triangle_bottom"></div>
<div id="triangle_left"></div>
<div id="triangle_right"></div>
<div id="right_triangle_top_left"></div>
<div id="right_triangle_top_right"></div>
<div id="right_triangle_bottom_left"></div>
<div id="right_triangle_bottom_right"></div>
<div id="circle"></div>
<div id="oval"></div>
<div id="trapezium"></div>
<div id="parallelogram"></div>
<div id="star"></div>
<div id="star_six_points"></div>
<div id="hexagon"></div>
<div id="heart"></div>
<div id="egg"></div>
<div id="infinity"></div>
</body>
</html>
