示例1（簡單特殊圖形）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊形狀</title>
<style type="text/css">
div{
display: inline-block;
width: 100px;
height: 100px;
border: 2px solid red;
margin: 10px;
}
/*圓角矩形*/
#d1{
border-radius: 10px; /*半徑值越大，弧線越大*/
}
#d2{
border-radius: 0px 10px 20px 40px; /*左上、右上、右下、左下*/
}
#d3{
border-radius: 50%; /*大於或者等於寬度的50%就是圓形*/
}
#d4{
height: 50px;
border-radius: 50px 50px 0px 0px;/*左上、右上、右下、左下*/
}
#d5{
width: 50px;
border-radius: 50px 0px 0px 50px;/*左上、右上、右下、左下*/
}
#d6{
height: 50px;
width: 50px;
border-radius: 50px 0px 0px 00px;/*左上、右上、右下、左下*/
}
#d7{
height: 50px;
width: 50px;
border-radius: 00px 0px 50px 00px;/*左上、右上、右下、左下*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
</body>
</html>
示例2（複雜特殊圖形）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊圖形</title>
<style type="text/css">
div {
margin-left:50px;
margin-top:50px;
display: inline-block;
}
.top {
width:0;
height:0;
border-bottom:2em solid #F00;
border-right:1.8em solid transparent;
border-left:1.8em solid transparent;
}
.bottom {
width:0;
height:0;
border-top:2em solid #F00;
border-right:1.8em solid transparent;
border-left:1.8em solid transparent;
}
.left {
width:0;
height:0;
border-left:2em solid #F00;
border-bottom:1.8em solid transparent;
border-top:1.8em solid transparent;
}
.right {
width:0;
height:0;
border-right:2em solid #F00;
border-bottom:1.8em solid transparent;
border-top:1.8em solid transparent;
}
.bottomLeft {
width:0;
height:0;
border-width:2em 1em;
border-style:solid;
border-color:transparent transparent #F00 #F00;
}
.bottomLeftRotate {
width:0;
height:0;
border-width:2em 1em;
border-style:solid;
border-color:transparent transparent #F00 #F00;
transform:rotate(60deg);
}
.up {
box-sizing:border-box;
position:relative;
width:0;
height:0;
border-right:.9em solid transparent;
border-bottom:.9em solid #F00;
border-left:.9em solid transparent;
}
.up:after {
content:"";
position:absolute;
left:50%;
top:.7em;
margin-left:-.45em;
/*寬度的一半，結合 left:50%;
使用*/
width:.9em;
height:1.3em;
background-color:#F00;
}
.up_right {
box-sizing:border-box;
position:relative;
width:1.3em;
height:.9em;
background-color:#F00;
}
.up_right:after {
content:"";
position:absolute;
top:50%;
left:1.1em;
margin-top:-.9em;
width:0;
height:0;
border-top:.9em solid transparent;
border-bottom:.9em solid transparent;
border-left:.9em solid #F00;
}
.up_bottom {
box-sizing:border-box;
position:relative;
width:.9em;
height:1.3em;
background-color:#F00;
}
.up_bottom:after {
content:"";
position:absolute;
left:50%;
top:1.1em;
margin-left:-.9em;
width:0;
height:0;
border-right:.9em solid transparent;
border-top:.9em solid #F00;
border-left:.9em solid transparent;
}
.up_left {
box-sizing:border-box;
position:relative;
width:0;
height:0;
border-top:.9em solid transparent;
border-right:.9em solid #F00;
border-bottom:.9em solid transparent;
}
.up_left:after {
content:"";
position:absolute;
top:0;
bottom:0;
/*在絕對定位中，top:0;
bottom:0;
margin:auto;
結合使用能豎直居中*/
left:.7em;
margin:auto;
width:1.3em;
height:.9em;
background-color:#F00;
}
.true {
display:inline-block;
width:20px;
height:15px;
background:#F00;
line-height:0;
font-size:0;
vertical-align:middle;
-webkit-transform:rotate(45deg);
}
.true:after {
content:'/';
display:block;
width:50px;
height:15px;
background:#F00;
-webkit-transform:rotate(-90deg) translateY(-5%) translateX(35%);
}
.true_one {
position:relative;
width:1.2em;
height:.3em;
background-color:#F00;
transform:rotate(60deg);
transform-origin:right center;
border-radius:.15em;
}
.true_one:after {
content:"";
position:absolute;
top:.1em;
left:-.85em;
width:2em;
height:.3em;
background-color:#F00;
transform:rotate(60deg);
transform-origin:right center;
border-radius:.15em;
}
.false {
position:relative;
width:2em;
height:.3em;
background-color:#F00;
transform:rotate(45deg);
border-radius:.15em;
}
.false:after {
content:"";
position:absolute;
width:2em;
height:.3em;
background-color:#F00;
transform:rotate(90deg);
border-radius:.15em;
}
.menu {
box-sizing:border-box;
position:relative;
width:2em;
height:2em;
background-color:#F00;
border-radius:.3em;
}
.menu:before {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:1.2em;
height:.15em;
background-color:#fff;
}
.menu:after {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:1.2em;
height:.9em;
border-width:.15em;
border-style:solid none;
border-color:#fff;
}
.menu2 {
box-sizing:border-box;
position:relative;
width:.5em;
height:.5em;
background-color:#F00;
border-radius:50%;
cursor:pointer;
}
.menu2:before {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
left:-.75em;
width:.5em;
height:.5em;
background-color:#F00;
border-radius:50%;
}
.menu2:after {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
left:.75em;
width:.5em;
height:.5em;
background-color:#F00;
border-radius:50%;
}
.download {
box-sizing:border-box;
position:relative;
width:2em;
height:.8em;
border-width:.3em;
border-style:none solid solid;
border-color:#F00;
}
.download:before {
content:"";
position:absolute;
right:0;
bottom:.7em;
left:0;
margin:auto;
width:.3em;
height:1em;
background-color:#F00;
}
.download:after {
content:"";
position:absolute;
right:0;
bottom:.2em;
left:0;
margin:auto;
width:0;
height:0;
border-right:.6em solid transparent;
border-top:.6em solid #F00;
border-left:.6em solid transparent;
}
.upload {
box-sizing:border-box;
position:relative;
width:2em;
height:.8em;
border-width:.3em;
border-style:none solid solid;
border-color:#F00;
}
.upload:before {
content:"";
position:absolute;
right:0;
bottom:.2em;
left:0;
margin:auto;
width:.3em;
height:1em;
background-color:#F00;
}
.upload:after {
content:"";
position:absolute;
right:0;
bottom:1.1em;
left:0;
margin:auto;
width:0;
height:0;
border-right:.6em solid transparent;
border-bottom:.6em solid #F00;
border-left:.6em solid transparent;
}
.video {
box-sizing:border-box;
position:relative;
width:1.5em;
height:1.2em;
background-color:#F00;
border-radius:.3em;
}
.video:after {
content:"";
position:absolute;
top:50%;
left:1.4em;
margin-top:-.7em;
width:0;
height:0;
border-top:.7em solid transparent;
border-right:.6em solid #F00;
border-bottom:.7em solid transparent;
}
.voice {
box-sizing:border-box;
position:relative;
width:1.4em;
height:1em;
border-width:.2em;
border-style:none none solid;
border-color:#F00;
border-radius:50%;
}
.voice:before {
content:"";
position:absolute;
right:0;
left:0;
bottom:.05em;
margin:auto;
width:.8em;
height:1.3em;
background-color:#F00;
border-radius:.4em;
}
.voice:after {
content:"";
position:absolute;
right:0;
bottom:-.6em;
left:0;
margin:auto;
width:0;
height:0;
border-right:.6em solid transparent;
border-bottom:.4em solid #F00;
border-left:.6em solid transparent;
}
.play {
box-sizing:border-box;
position:relative;
width:2em;
height:2em;
border:.2em solid #F00;
border-radius:50%;
}
.play:after {
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
margin-top:auto;
margin-bottom:auto;
margin-left:-.3em;
/*沒有讓其左右居中，因爲看起來右邊更空一些*/
width:0;
height:0;
border-top:.6em solid transparent;
border-bottom:.6em solid transparent;
border-left:.9em solid #F00;
}
.pause {
box-sizing:border-box;
position:relative;
width:2em;
height:2em;
border:.2em solid #F00;
border-radius:50%;
}
.pause:before {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
margin-top:auto;
margin-bottom:auto;
margin-left:-.35em;
width:.2em;
height:.9em;
background-color:#F00;
}
.pause:after {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
margin-top:auto;
margin-bottom:auto;
margin-left:.15em;
width:.2em;
height:.9em;
background-color:#F00;
}
.previous {
box-sizing:border-box;
position:relative;
width:2em;
height:2em;
border:.2em solid #F00;
border-radius:50%;
}
.previous:before {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
margin-top:auto;
margin-bottom:auto;
margin-left:-.65em;
width:0;
height:0;
border-top:.45em solid transparent;
border-bottom:.45em solid transparent;
border-right:.6em solid #F00;
}
.previous:after {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
margin-top:auto;
margin-bottom:auto;
margin-left:-.2em;
width:0;
height:0;
border-top:.45em solid transparent;
border-bottom:.45em solid transparent;
border-right:.6em solid #F00;
}
.next {
box-sizing:border-box;
position:relative;
width:2em;
height:2em;
border:.2em solid #F00;
border-radius:50%;
}
.next:before {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
margin-top:auto;
margin-bottom:auto;
margin-left:-.4em;
width:0;
height:0;
border-top:.45em solid transparent;
border-bottom:.45em solid transparent;
border-left:.6em solid #F00;
}
.next:after {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
margin-top:auto;
margin-bottom:auto;
margin-left:.05em;
width:0;
height:0;
border-top:.45em solid transparent;
border-bottom:.45em solid transparent;
border-left:.6em solid #F00;
}
.stop {
box-sizing:border-box;
position:relative;
width:2em;
height:2em;
border:.2em solid #F00;
border-radius:50%;
}
.stop:after {
box-sizing:border-box;
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:.9em;
height:.9em;
background-color:#F00;
}
.position {
position:relative;
width:.6em;
height:.6em;
border:.4em solid #F00;
border-radius:50%;
}
.position:after {
content:"";
position:absolute;
top:.55em;
left:-.4em;
width:0;
height:0;
border-top:1em solid #F00;
border-right:.7em solid transparent;
border-left:.7em solid transparent;
border-top-left-radius:50%;
border-top-right-radius:50%;
}
.pc {
box-sizing:border-box;
position:relative;
width:2em;
height:1.4em;
border-width:.2em .2em .3em;
border-style:solid;
border-color:#F00;
border-radius:.2em;
background-color:#efefef;
}
.pc:before {
content:"";
position:absolute;
top:1.2em;
right:0;
left:0;
margin:auto;
width:.6em;
height:.4em;
background-color:#F00;
}
.pc:after {
content:"";
position:absolute;
top:1.6em;
right:0;
left:0;
margin:auto;
width:1.6em;
height:.2em;
background-color:#F00;
}
.phone {
box-sizing:border-box;
position:relative;
width:1.4em;
height:2em;
background-color:#efefef;
border-width:.3em .2em .5em;
border-style:solid;
border-color:#F00;
border-radius:.15em;
}
.phone:after {
content:"";
position:absolute;
right:0;
bottom:-.4em;
left:0;
margin:auto;
width:.5em;
height:.3em;
background-color:#fff;
border-radius:.3em;
}
.search {
box-sizing:border-box;
position:relative;
width:1em;
height:.3em;
background-color:#F00;
border-top-right-radius:.15em;
border-bottom-right-radius:.15em;
transform:rotate(40deg);
transform-origin:right center;
}
.search:before {
content:"";
position:absolute;
left:-1.3em;
bottom:-.6em;
width:1em;
height:1em;
border:.3em solid #F00;
border-radius:50%;
}
.star {
box-sizing:border-box;
position:relative;
width:0;
height:0;
border-top:.7em solid #F00;
border-right:1em solid transparent;
border-left:1em solid transparent;
}
.star:before {
content:"";
position:absolute;
top:-.7em;
left:-1em;
width:0;
height:0;
border-top:.7em solid #F00;
border-right:1em solid transparent;
border-left:1em solid transparent;
transform:rotate(72deg);
}
.star:after {
content:"";
position:absolute;
top:-.7em;
left:-1em;
width:0;
height:0;
border-top:.7em solid #F00;
border-right:1em solid transparent;
border-left:1em solid transparent;
transform:rotate(-72deg);
}
.email {
box-sizing:border-box;
position:relative;
width:0;
height:0;
border-width:.7em 1em;
border-style:solid;
border-color:transparent transparent #F00 #F00;
}
.email:before {
content:"";
position:absolute;
top:-.7em;
left:1em;
transform:rotateY(180deg);
transform-origin:left center;
width:0;
height:0;
border-width:.7em 1em;
border-style:solid;
border-color:transparent transparent #F00 #F00;
}
.email:after {
content:"";
position:absolute;
top:-.7em;
left:50%;
margin-left:-.9em;
width:0;
height:0;
border-top:.6em solid #F00;
border-right:.9em solid transparent;
border-left:.9em solid transparent;
}
.eye {
box-sizing:border-box;
position:relative;
width:2em;
height:1.2em;
background-color:#F00;
border-radius:50%;
}
.eye:before {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:.8em;
height:.8em;
background-color:#fff;
border-radius:50%;
}
.eye:after {
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:.4em;
height:.4em;
background-color:#F00;
border-radius:50%;
}
.unlock {
box-sizing:border-box;
position:relative;
width:1.6em;
height:1.4em;
background-color:#F00;
border-radius:.2em;
}
.unlock:before {
box-sizing:border-box;
content:"";
position:absolute;
top:-.4em;
right:-.4em;
width:1em;
height:.6em;
border-width:.2em;
border-style:solid solid none;
border-color:#F00;
border-radius:.5em;
}
.unlock:after {
box-sizing:border-box;
content:"";
position:absolute;
bottom:.2em;
left:50%;
margin-left:-.15em;
width:.3em;
height:.5em;
border-top-left-radius:.25em;
border-top-right-radius:.25em;
background-color:#fff;
}
.cup {
box-sizing:border-box;
position:relative;
width:1.3em;
height:2em;
border-width:.2em .2em 1.2em;
border-style:solid;
border-color:#F00;
background-color:#efefef;
border-bottom-left-radius:.3em;
border-bottom-right-radius:.3em;
}
.cup:before {
box-sizing:border-box;
content:"";
position:absolute;
top:.1em;
left:-.7em;
width:.7em;
height:1.4em;
border-width:.2em;
border-style:solid;
border-color:#F00;
border-top-left-radius:.3em;
border-bottom-left-radius:.3em;
}
.heart {
position:relative;
width:1.4em;
height:2em;
background-color:#F00;
border-top-left-radius:1em;
border-top-right-radius:1em;
transform:rotate(-45deg);
transform-origin:center bottom;
}
.heart:after {
content:"";
position:absolute;
top:-.7em;
left:-.7em;
width:1.4em;
height:2em;
background-color:#F00;
border-top-left-radius:1em;
border-top-right-radius:1em;
transform:rotate(90deg);
transform-origin:center bottom;
}
.home {
box-sizing:border-box;
position:relative;
width:1.4em;
height:1em;
background-color:#F00;
}
.home:before {
content:"";
position:absolute;
top:-.7em;
left:50%;
margin-left:-1em;
border-left:1em solid transparent;
border-right:1em solid transparent;
border-bottom:.8em solid #F00;
}
.home:after {
z-index:2;
content:"";
position:absolute;
right:0;
bottom:0;
left:0;
margin:auto;
width:.3em;
height:.5em;
background-color:#fff;
}
.password {
box-sizing:border-box;
position:relative;
width:1.8em;
height:1.4em;
background-color:#F00;
border-radius:.2em;
}
.password:before {
box-sizing:border-box;
content:"";
position:absolute;
top:-.6em;
left:50%;
margin-left:-.5em;
width:1em;
height:1em;
border:.2em solid #F00;
border-radius:50%;
}
.password:after {
box-sizing:border-box;
content:"";
position:absolute;
bottom:.2em;
left:50%;
margin-left:-.15em;
width:.3em;
height:.5em;
border-top-left-radius:.25em;
border-top-right-radius:.25em;
background-color:#fff;
}
.user {
box-sizing:border-box;
position:relative;
width:.9em;
height:.9em;
background-color:#F00;
border-radius:50%;
}
.user:after {
content:"";
position:absolute;
top:1em;
left:50%;
margin-left:-.9em;
width:1.8em;
height:1em;
background-color:#F00;
border-top-left-radius:.9em;
border-top-right-radius:.9em;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottomLeft"></div>
<div class="bottomLeftRotate"></div>
<div class="up"></div>
<div class="up_bottom"></div>
<div class="up_right"></div>
<div class="up_left"></div>
<div class="true"></div>
<div class="true_one"></div>
<div class="false"></div>
<div class="menu"></div>
<div class="menu2"></div>
<div class="download"></div>
<div class="upload"></div>
<div class="video"></div>
<div class="voice"></div>
<div class="play"></div>
<div class="pause"></div>
<div class="previous"></div>
<div class="next"></div>
<div class="stop"></div>
<div class="position"></div>
<div class="pc"></div>
<div class="phone"></div>
<div class="search"></div>
<div class="star"></div>
<div class="email"></div>
<div class="eye"></div>
<div class="unlock"></div>
<div class="cup"></div>
<div class="heart"></div>
<div class="home"></div>
<div class="password"></div>
<div class="user"></div>
</body>
</html>