你知道的各种形状（CSS实现各种形状）

单纯通过CSS我们就可以实现页面的形状样式。CSS绘制的形状随着屏幕分辨率的提高不会出现变形失真的问题，值得推荐。

三角形

利用四边border不同以及颜色的transparent实现

<div class="triangle"></div>
<style>
  .triangle{
      width: 0;
      height: 0;
      border-top: 0px;
      border-bottom: 30px solid red;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
  }
</style>

直角三角形

<div class="right-triangle"></div>
<style>
  .right-triangle{
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-bottom: 30px solid red;

  }
</style>

圆形

利用 border-radius: 50%;

<div class="circle"></div>
<style>
  .circle{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: red;
  }
</style>

半圆

    <div class="harf-circle"></div>
    <style>
        .harf-circle{
            width: 30px;
            height: 15px;
            background: red;
            border-radius: 15px 15px 0 0;
        }
    </style>

平行四边形

利用的是 transform: skewX(-48deg);

<div class="paralle"></div>
<style>
  .paralle{
      width: 300px;
      height: 150px;
      transform: skewX(-48deg);
      background: linear-gradient(0deg, #0840C8, #06297D);
  }
</style>

梯形

方法一：左右两个直角三角形中间一个矩形

    <div class="ladder">
    </div>
    <style>
        .ladder{
            margin-left: 300px;
            height: 100px;
            width:100px;
            background-color: blue;
            position: relative;
        }
        .ladder:before{
            content: "";
            border-bottom: 100px solid red;
            border-left: 100px solid transparent;
            position: absolute;
            left: -100px;
        }
        .ladder:after{
            content: "";
            border-bottom: 100px solid red;
            border-right: 100px solid transparent;
            position: absolute;
            right: -100px;
        }
    </style>

这种方法利用的是border形成直角三角形，缺点是因为border不能形成渐变色，不适用于背景渐变色的梯形。

方法二：左右两边两个平行四边形 + 中间一个矩形

<div class="ladderShape"></div>
<style>
  .ladderShape{
      width: 300px;
      height: 150px;
      background: linear-gradient(0deg, #0840C8, #06297D);
      margin-left: 100px;
      position: relative;
  }
  .ladderShape:before{
      position: absolute;
      left: -100px;
      content:'';
      width: 175px;
      height: 150px;
      background: linear-gradient(0deg, #0840C8, #06297D);
      transform: skewX(-45deg);
  }
  .ladderShape:after{
      position: absolute;
      right: -100px;
      content:'';
      width: 175px;
      height: 150px;
      background: linear-gradient(0deg, #0840C8, #06297D);
      transform: skewX(45deg);
  }
</style>

应用

丝带效果一：

    <div class="wrap">
        <div class="sidai"></div>
    </div>
    <style>
        .wrap{
            width: 300px;
            height: 500px;
            margin-left: 300px;
            margin-top: 100px;
            position: relative;
            background: #ccc;
        }
        .sidai{
            position: absolute;
            left: -8px;
            top: 30px;
            width: 80%;
            height: 30px;
            background:#59324C;
        }
        .sidai:before{
            content: '';
            border-bottom: 8px solid #59324C;
            border-left: 8px solid transparent;
            position: absolute;
            top: -8px;
        }
        .sidai:after{
            content: '';
            height: 0;
            width: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 9px solid #59324C;
            right: -9px;
            position: absolute;
        }
    </style>

丝带效果二：

    <div class="wrap">
        <div class="sidai">
            <span class="sidai-half"></span>
        </div>
    </div>
    <style>
        .wrap{
            width: 300px;
            height: 500px;
            margin-left: 300px;
            margin-top: 100px;
            position: relative;
            background: #ccc;
        }
        .sidai-half{
            background: #C02031;
            height: 6px;
            width: 8px;
            border-radius: 8px 8px 0 0;
            position: absolute;
            left: -8px;
            top: 0;
        }
        .sidai{
            position: absolute;
            background:  #F8463F;
            width: 106px;
            height: 40px;
            right: 10px;
            top: -6px;
            border-top-right-radius: 8px;
 
        }
        .sidai:before{
            content: '';
            background:  #F8463F;
            height: 6px;
            width: 4px;
            position: absolute;
            left: -4px;
            top: 0;
           
        }
        .sidai:after{
            content: '';
            height: 0;
            width: 0;
            border-left: 53px solid transparent;
            border-right: 53px solid transparent;
            border-top: 10px solid #F8463F;
            position: absolute;
            bottom: -10px;
        }
    </style>

丝带效果三：

    <div class="wrap">
        <div class="sibbon">
            <div class="sidai">
            </div>
        </div>
    </div>
    <style>
        .wrap{
            width: 300px;
            height: 500px;
            margin-left: 300px;
            margin-top: 100px;
            background: #ccc;
            position: relative;
        }
        .sibbon{
            width: 100%;
            height: 100%;
            position: absolute;
            top: -8px;
            left: 8px;
            overflow: hidden;
        }
        .sibbon:before{
            content: "";
            display: block;
            border-radius: 8px 8px 0px 0px;
            width: 40px;
            height: 8px;
            position: absolute;
            right: 100px;
            background: #4D6530;
        }
        .sibbon:after{
            content: "";
            display: block;
            border-radius: 0px 8px 8px 0px;
            width: 8px;
            height: 40px;
            position: absolute;
            right: 0px;
            top: 100px;
            background: #4D6530;
        }
        .sidai{
            width: 200px;
            height: 40px;
            border: 1px dashed white;
            box-shadow: 0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0,0,0,0.6);
            background: #57DD43;
            -webkit-transform: rotate(45deg);
            position:absolute;
            top: 30px;
            right: -50px;
            z-index: 2;
        }
    </style>

更多精美丝带样式： www.jq22.com/webqd3850