【html5/css3】CSS实现各种图形(常用图形)

1.正方形

{
    width: 200px;
    height: 100px;
    background: red;
}

2.长方形

{
    width: 200px;
    height: 100px;
    background: red;
}

3.圆

{
    width:100px;
    height:100px;
    background:red;
    border-radius:50%; /* 水平、垂直半径为宽高的50% */
}

4.椭圆

{
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px / 50px;  /* 表示以水平半径100px 垂直半径50px的椭圆切割 */
}

5.三角形(上)

{
    width: 0;
    height: 0;
    /* border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red; */
    border: 50px solid;
    border-color: transparent transparent red transparent;
}

6.三角形(下)

{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

7.三角箭头(左)

 .arrow_left{
   width: 7px;
   height: 7px;
   border-top: 2px solid #ff0000;
   border-right: 2px solid #ff0000;
   transform: rotate(-135deg);
  }

8.三角箭头(右) 【同理上和下箭头只需要旋转对应的度数即可得到】

.arrow_right{
    width: 7px;
    height: 7px;
    border-top: 2px solid #ff0000;
    border-right: 2px solid #ff0000;
    transform: rotate(45deg);
}

9.三角形(左上)

{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

10.三角形(右上)

{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

11.三角形(右下)

{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

12.三角形(左下)

{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

13.梯形

{
    border-bottom: 100px solid red;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 100px;
}

14.平行四边形

{
    width: 150px;
    height: 100px;
    transform: skew(20deg);/*  倾斜20° */
    background: red;
}

15.六角星

#star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}
#star-six:after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}