美文网首页
纯css基本图形

纯css基本图形

作者: 张思学 | 来源:发表于2020-03-04 13:56 被阅读0次
    常用基本图形:

    圆形


    image.png
    . round {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: red;
    }
    

    上三角


    image.png
    . triangle-top {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }
    

    下三角


    image.png
    .triangele-bottom {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid red;
    }
    

    左三角


    image.png
    .triangele-left {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }
    

    右三角


    image.png
    .triangele-right {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 50px solid transparent;
      border-bottom: 100px solid red;
    }
    

    左上三角


    image.png
    .triangele-topleft {
        width: 0;
        height: 0;
        border-top: 100px solid red; 
        border-right: 100px solid transparent;          
    }
    

    右上三角


    image.png
    .triangele-topright {
        width: 0;
        height: 0;
        border-top: 100px solid red; 
        border-left: 100px solid transparent;          
    }
    

    左下三角


    image.png
    .triangele-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100px solid red; 
        border-right: 100px solid transparent;          
    }
    

    右下三角


    image.png
    .triangele-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100px solid red; 
        border-left: 100px solid transparent;          
    }
    

    平行四边形


    image.png
    .parallelogram {
      width: 150px;
      height: 100px;
      margin-left:20px;
      transform: skew(20deg);
      background: red;
    }
    

    五角星


    image.png
    .star-five {
      margin: 50px 0;
      position: relative;
      display: block;
      color: red;
      width: 0px;
      height: 0px;
      border-right:  100px solid transparent;
      border-bottom: 70px  solid red;
      border-left:   100px solid transparent;
      transform:      rotate(35deg);
    }
    .star-five:before {
      border-bottom: 80px solid red;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    .star-five:after {
      position: absolute;
      display: block;
      color: red;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      transform:      rotate(-70deg);
      content: '';
    }
    

    相关文章

      网友评论

          本文标题:纯css基本图形

          本文链接:https://www.haomeiwen.com/subject/zckvlhtx.html