此文主要是为了加深自己对CSS3的一些理解，在此主要列举一下一些多边形如何来画，以及如何调整。长方形和正方形大家都明白，这里就列举了。

目录

1、相关圆形
2、相关三角形
3、相关多边形

1、相关圆形

//单个实心圆，主要注意border-radius即可
.single-round{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}
<div class="single-round"> 
</div>

//双圆，方式一分别画大小圆
.round-box{
    width: 100px;
    height: 100px;
    position: relative;
}
.round-bigRound {
    width: 100px;
    height: 100px;
    background:black;
    border-radius: 50%;
}
.round-smallRound{
    width: 80px;
    height: 80px;
    position:absolute;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    background:#cc313d;
}
<div class="round-box">
    <div class="round-bigRound"></div>
    <div class="round-smallRound"></div>
</div>

//双圆，方式二，只画一个圆利用box-shadow的inset属性内部阴影实现外边圆
.round-boxshadow{
    width: 100px;
    height: 100px;
    background:#cc313d;
    border-radius: 50%;
    box-shadow: inset 0 0 0 15px rgba(200,200,200, 0.6);
}
<div class="round-boxshadow"></div>

//椭圆，水平半径和垂直半径分别是宽高的一半
.ellipse{
    width: 100px;
    height: 50px;
    background-color: #999;
    text-align: center;
    border-radius: 50px/25px;
}
<div class="ellipse"></div>

2、相关三角形

//向上三角形
.triangle-up{
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
<div class="triangle-up"></div>

//向下三角形
.triangle-down{
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
<div class="triangle-down"></div>

//向左三角形
.triangle-left{
    width: 0px;
    height: 0px;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}
<div class="triangle-left"></div>

//向右三角形
.triangle-right{
    width: 0px;
    height: 0px;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}
<div class="triangle-right"></div>

//左上角三角形，常见置顶标志
.triangle-topleft{
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
<div class="triangle-topleft"></div>

//右上角三角形
.triangle-topright {
    width: 0px;
    height: 0px;
    border-top: 100 solid red;
    border-left: 100 solid transparent;
}
<div class="triangle-topright"></div>

//左底角三角形
.triangle-bottomleft  {
    width: 0px;
    height: 0px;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}
<div class="triangle-bottomleft"></div>

//右底角三角形
.triangle-bottomright   {
    width: 0px;
    height: 0px;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
<div class="triangle-bottomright"></div>

//提示对话框
.talkbubble{
    width: 200px;
    height: 100px;
    background-color: red;
    position: relative;
    left: 100px;
    border-radius: 10px;
    padding: 5px 10px;
}
.talkbubble:before{
    width: 0;
    height: 0;
    right: 100%;
    top: 30px;
    position: absolute;
    content: "";
    border-top: 15px solid transparent;
    border-right: 30px solid red;
    border-bottom: 15px solid transparent;
}
<div class="talkbubble">
    测试文本测试文本测试文本测试文本测试文本
</div>

3、相关多边形

//平行四边形，利用transform：skew 向x轴偏移
.parallelogram {
    width: 100px;
    height: 50px;
    margin-left: 30px;
    transform: skew(-30deg);
    background-color: red;
}
<div class="parallelogram"></div>

//梯形，类似各个朝向的三角形，只是把中间宽度撑开
.trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    width: 100px;
    height: 0px;
}
<div class="trapezoid"></div>

//五角星
.star-five {
    width: 0;
    height: 0;
    color: red;
    margin: 50px;
    position: relative;
    display: block;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 35px solid red;
    transform:rotate(35deg);
}
.star-five:before {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 40px solid red;
    position: absolute;
    top: -25px;
    left: -35px;
    color: white;
    display: block;
    content: "";
    transform:rotate(-35deg);
}
.star-five:after {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    color: red;
    top: 3px;
    left: -55px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 35px solid red;
    content: "";
    transform:rotate(-70deg);
}
<div class="star-five"></div>

//五边形
.pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
    margin: 50px;
}
.pentagon:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}
<div class="pentagon"></div>

//六边形
.hexagon {
    width: 100px;
    height: 55px;
    background-color: red;
    position: relative;
    margin: 50px;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: ;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
.hexagon:after {
    content: "";
    left: 0;
    width: 0;
    height: 0;
    bottom: -25px;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}
<div class="hexagon"></div>