css3绘制各种形状图形三角形，菱形，五角星，椭圆等

<!--制作圆形-->
<style type="text/css">
    #ang1{
        width: 120px;
        height: 120px;
        background: #000;
        border-radius: 60px;
    }
</style>
<div id="ang1"></div> 
 
<!--制作椭圆-->
<style type="text/css">
    #ang2{
        width: 200px;
        height: 100px;
        background: #000;
        border-radius: 100px / 50px;
    }
</style>
<div id="ang2"></div>
 
<!--制作左三角形-->
<style type="text/css">
    #ang3{
        width: 0;
        height: 0;
        border-top: 70px solid transparent;
        border-bottom: 70px solid transparent;
        border-right: 140px solid #000;
    }
</style>
<div id="ang3"></div>
 
<!--制作倒三角形-->
<style type="text/css">
    #ang4{
        width: 0;
        height: 0;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
        border-top: 140px solid #000;
    }
</style>
<div id="ang4"></div>
 
<!--制作菱形：transform属性和rotate相结合，使两个正反三角形上下显示-->
<style type="text/css">
    #ang5{
        width: 120px;
        height: 120px;
        background: #000;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
        margin: 60px 0 10px 310px;
    }
</style>
<div id="ang5"></div>
 
<!--制作梯形：左边框和右边框可以动态变化-->
<style type="text/css">
    #ang6{
        width: 120px;
        height: 0;
        border-bottom: 120px solid #ec3504;
        border-left: none;
        border-right: 60px solid transparent;
    }
</style>
<div id="ang6"></div>
 
<!--制作平行四边形：使用transform使长方形倾斜一个角度-->
<style type="text/css">
    #ang8{
        width: 160px;
        height: 100px;
        background: #000;
        transform: skew(30deg);
    }
</style>
<div id="ang8"></div>
 
<!--制作平行六角星-->
<style type="text/css">
    #ang9{
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        margin: 10px auto;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #000;
    }
    #ang9:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #000;
        margin: 30px 0 0 -50px;
    }
</style>
<div id="ang9"></div>
 
<!--制作平行六边形-->
<style type="text/css">
    #ang10{
        width: 100px;
        height: 55px;
        background: #000;
        margin: 10px auto;
        position: relative;
    }
    #ang10: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 #000;
    }
    #ang10: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 #000;
    }
</style>
<div id="ang10"></div>
 
<!--制作平行五角星-->
<style type="text/css">
    #ang11{
        width: 0;
        height: 0;
        margin: 50px 0;
        color: red;
        display: block;
        position: relative;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 70px solid red;
        transform: rotate(35deg);
    }
    #ang11:before{
        content: "";
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        top: -45px;
        left: -65px;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 80px solid red;
        transform: rotate(-35deg);
    }
    #ang11:after{
        content: "";
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        top: 3px;
        left: -105px;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 70px solid red;
        transform: rotate(-70deg);
    }
</style>
<div id="ang11"></div>
 
<!--制作蛋形-->
<style type="text/css">
    #ang12{
        width: 136px;
        height: 190px;
        background: #000;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
</style>
<div id="ang12"></div>
 
<!--制作无穷符号-->
<style type="text/css">
    #ang13{
        width: 220px;
        height: 100px;
        position: relative;
    }
    #ang13:before,
    #ang13:after{
        content: "";
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        border: 20px solid #06c999;
        border-radius: 50px 50px 0 50px;
        transform: rotate(-45deg);
    }
    #ang13:after{
        left: auto;
        right: 0;
        border-radius: 50px 50px 50px 0;
        transform: rotate(45deg);
    }
</style>
<div id="ang13"></div>
 
<!--制作消息提示框-->
<style type="text/css">
    #ang14{
        width: 140px;
        height: 100px;
        background: #088cb7;
        position: relative;
        border-radius: 12px;
    }
    #ang14:before{
        content: "";
        width: 0;
        height: 0;
        right: 100%;
        top: 38px;
        position: absolute;
        border-top: 13px solid transparent;
        border-bottom: 13px solid transparent;
        border-right: 26px solid #088cb7;
    }
</style>
<div id="ang14"></div>
 
<!--制作方块-->
<style type="text/css">
    #ang15{
        width: 100px;
        height: 100px;
        background: #000;
    }
</style>
<div id="ang15"></div>
 
<!--制作左上角-->
<style type="text/css">
    #ang16{
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
</style>
<div id="ang16"></div>
 
<!--制作左下角-->
<style type="text/css">
    #ang17{
        width: 0;
        height: 0;
        border-left: 100px solid red;
        border-top: 100px solid transparent;
    }
</style>
<div id="ang17"></div>
 
<!--制作右上角-->
<style type="text/css">
    #ang18{
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }
</style>
<div id="ang18"></div>
 
<!--制作右下角-->
<style type="text/css">
    #ang19{
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }
</style>
<div id="ang19"></div>
 
<!--制作弯曲的尾巴箭头-->
<style type="text/css">
     #curvedarrow {
        position: relative;
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-right: 9px solid red;
        transform: rotate(10deg);
    }
    #curvedarrow:after {
        content: "";
        position: absolute;
        border: 0 solid transparent;
        border-top: 3px solid red;
        border-radius: 20px 0 0 0;
        top: -12px;
        left: -9px;
        width: 12px;
        height: 12px;
        transform: rotate(45deg);
    }
</style>
<div id="curvedarrow"></div>
 
<!--制作五边形-->
<style type="text/css">
    #pentagon {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: red transparent;
    }
    #pentagon:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent red;
    }
</style>
<div id="pentagon"></div>
 
<!--制作心形-->
<style type="text/css">
     #heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
</style>
<div id="heart"></div>