CSS | css怎么画各种四边形的思路解析

Axjy
3,210 阅读3分钟

这是我参与更文挑战的第4天，活动详情查看 更文挑战

在之前的文章【CSS | 4句CSS送你一个小月牙】中，汇总了很多经常用到的css形状，本篇文章主要是分析一下四边形系列的实现思路。

梯形的实现

梯形的实现其实和我们之前说过的三角形的实现很像；

主要利用的核心属性border

第一步

首先：画一个加边框的普通正方形，是这样的：

image.png

<div class="div"></div>
.div {
    width: 100px;
    height: 100px;
    border: 1px solid #66CCFF;
 }

第二步

如果把border的数值调大

image.png

.div {
    width: 100px;
    height: 100px;
    border: 50px solid #66CCFF;
 }

第三步

如果只把高度设为0,会发现好像变成了一个长方形；

image.png

.div {
     width: 100px;
     height: 0;
     border: 50px solid #66CCFF;
    }

第四步

但是如果给border设置不同的颜色，

会发现这个长方形其实是由两个梯形和两个三角形组合而成的，

以为得到绿色的正梯形为例，我们现在只需要把多余的图形去掉即可。

image.png

.div {
     width: 100px;
     height: 0;
     border: 50px solid #66CCFF;
     border-color: #66CCFF #FF9966 #66FFCC  #66FFFF;
    }

第五步

如果我们把除绿色外的其他形状颜色利用transparent设为透明,

可以发现我们好像得到了我们想要的梯形

image.png

.div {
     width: 100px;
     height: 0;
     border: 50px solid #66CCFF;
     border-color: transparent transparent #66FFCC  transparent;
    }

但是如果给这个梯形加上背景色，

可以看到去掉的形状其实还在占位。

image.png

.div {
     width: 100px;
     height: 0;
     border: 50px solid #66CCFF;
     border-color: transparent transparent #66FFCC  transparent;
     background: #000000
    }

第六步

所以我们需要处理一下占位的问题；

思路：我们都知道border可以分别为top,bottom，left，right四个方向设值，如果想要去掉多余的占位，我们只需要分开给需要的方向设值，就可以得到我们想要的完美梯形啦；

image.png

.div {
       height: 0;
       width: 100px;
       border-bottom: 50px solid #66FFCC;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
    }

平行四边形的实现

原理

原理：利用transform属性拉伸矩形。

平行四边形有好多种实现方法，这里只介绍最简单的这种

从下图可以看到，我们实现平行四边形的关键就是这一句 transform: skew(20deg);

image.png

skew属性

介绍：skew是transform的倾斜属性；

用法： transform: skew(20deg)或 transform: skew(20deg,20deg);

参数：

  • 一个参数时：表示水平方向的倾斜角度；
  • 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

图解：[图片来源于网络]

skewX(30deg) 等价于transform:skew(30deg, 0)如下图：

image.png

skewY(10deg) 等价于transform:skew(0, 30deg)如下图：

image.png

skew(30deg,10deg)等价于transform:skewX(30deg); transform:skewY(10deg); 如下图：

image.png

其他

使用这种方法有一个问题就是，如果平行四边形里面有内容，也会使里面的内容发生倾斜变形。

image.png

解决办法：可以对内容再使用一次反向的 skew() 变形，来抵消容器对内容产生的变形效果。 transform: skew(-20deg);

image.png

菱形的实现

菱形的实现也有很多种

方案一

最简单的就是，利用transform的旋转属性，对正方形旋转45度即可。

image.png

#diamond{
    width: 100px;
    height: 100px;
    background: #99CCFF;
    transform: rotate(45deg);
}

方案二

之前我们已经介绍过三角形是怎么实现的，其实菱形我们还可以把它看成是两个三角形的组合。

我们只需要把两个三角形拼在一起，就变成一个菱形啦。

image.png

#diamond {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 50px solid  #FF9966;
      position: relative;
      top: -50px;
    }
    #diamond:after {
      content: '';
      position: absolute;
      left: -50px;
      top: 50px;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 50px solid #99CCFF;
    }

小可爱看完就点个赞再走吧！🤞🤞🤞

avatar
文章
阅读
粉丝