CSS实现各种图形(常用图形)

整理一下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: 0;
    height: 0;
    border: 50px solid;
    border-color:  transparent red transparent transparent;
    position: relative;
  }
  .arrow_left::after{
    content: '';
    position: absolute;
    right: -55px;
    bottom: -50px;
    border: 50px solid;
    border-color: transparent white transparent transparent;
  }

8.三角箭头(右)

.arrow_right{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color:  transparent transparent transparent red ;
    position: relative;
}
.arrow_right::after{
    content: '';
    position: absolute;
    left: -55px;
    bottom: -50px;
    border: 50px solid;
    border-color: transparent transparent transparent  white ;
}

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;
}