CSS之画常见的图形

1.三角形

复制代码

  .shape {
        width: 0;
        height: 0;
        border-top: 100px solid rgba(0, 0, 0, 0);
        border-right: 100px solid rgba(0, 0, 0, 0);
        border-bottom: 100px solid blue;
        border-left: 100px solid rgba(0, 0, 0, 0);
      }

使用border属性实现。宽高设置为0，border里其中一个方向设置为想要的颜色，其他的设置为完全透明的颜色。

2. 正方形

复制代码

  .shape {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
      }

正方形都会画，纯属占个位子。。

3. 五边形

复制代码

 .shape {
        width: 100px;
        height: 100px;
        background-color: blue;
        clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
      }

clip-path 属性用于创建一个正五边形的形状。polygon函数接收一系列的点来定义形状的边界。每对百分比值代表一个顶点的位置相对于元素本身的宽和高的百分比。该形状的顶点顺序是从正五边形的顶点开始，然后沿逆时针方向定义其余顶点。clip-path属性在不同的浏览器中的支持程度可能不同，特别是在一些老旧的浏览器版本中可能无法正常工作。建议使用SVG来实现。

4. 六角形

复制代码

 .shape {
        width: 0;
        height: 0;
        margin: 66px auto;
        border-top: 30px solid transparent;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid red;
      }

      .shape::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 30px solid red;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid transparent;
        margin: 126px auto;
        position: absolute;
        top: -20px;
        left: calc(50% - 30px);
      }

原理同三角形，使用两个三角形拼接的。

5. 圆形

复制代码

 .circle-one {
 	width: 80px;
 	height: 80px;
    background-color: lightcoral;
    border-radius: 50%;
 }

圆形设置下border-radius为宽高的一半或者50%就可以了。

6. 平行四边形

复制代码

.shape {
        width: 120px;
        height: 100px;
        margin: 50px auto;
        background-color: lightgoldenrodyellow;

        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        -ms-transform: skew(30deg);
        -o-transform: skew(30deg);
        transform: skew(30deg);
      }

skew(30deg)沿着X轴倾斜30度。

7. 梯形

复制代码

  .shape {
        width: 80px;
        height: 80px;
        background-color: transparent;

        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid blue;
        border-left: 20px solid transparent;
        margin: 50px auto;
      }

和画三角形差不多，不同的是设置宽高。

8. 椭圆

复制代码

 .oval {
        width: 100px;
        height: 80px;
        background-color: lightcoral;
        margin: 50px auto;
        border-radius: 50%;
      }

同圆形，宽高值不一样。

9. 菱形

复制代码

 .shape {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        background-color: lightgoldenrodyellow;

        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);

        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
      }

元素沿顺时针方向旋转45度。负值表示逆时针旋转。

transform-origin: 0 100%; 0 100%元素的左下角为变换的原点。