画一个梯形的方法

首先我们不看边框，先看一下画这种梯形的方法有哪些：

遮盖

首先是最容易想到的，我们直接画一个矩形，然后在右下角放一个白色的三角形，遮盖住。

html 复制代码

<html>
  <head>
    <style>
      .shape {
        width: 200px;
        height: 100px;
        background-color: rgb(102, 177, 255);
        position: relative;
      }
      .shape::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0px;
        right: 0px;
        border-left: 10px solid transparent;
        border-right: 30px solid white;
        border-top: 20px solid transparent;
      }
    </style>
  </head>
  <body>
    <div class="shape"></div>
  </body>
</html>

background渐变

我们也可以利用background的渐变来得到一个梯形的样子，让三角区域透明

html 复制代码

.shape {
        width: 200px;
        height: 100px;
        background: linear-gradient(
          150deg,
          rgb(102, 177, 255) 90%,
          transparent 90%,
          transparent 100%
        );
      }

mask 遮罩

除了直接用渐变色生成形状之外，我们还能反向操作，利用渐变对右下角进行遮罩

js 复制代码

.shape {
        width: 200px;
        height: 100px;
        background-color: rgb(102, 177, 255);
        -webkit-mask: linear-gradient(
          150deg,
          rgb(102, 177, 255) 90%,
          transparent 90%,
          transparent 100%
        );
      }

clip-path

我们还可以直接在矩形上裁剪出一个梯形出来

html 复制代码

.shape {
        width: 200px;
        height: 100px;
        background-color: rgb(102, 177, 255);
        clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);
      }

边框和阴影

下面看看如何在上面梯形的基础上加上边框

叠加法

所谓叠加法的原理就是，在已经得到一个梯形的基础上，再弄一个梯形，但是把它放大一点作为地图，背景颜色也设置为边框或者阴影的颜色或者渐变，两个梯形一叠加，就能得到需要的效果。

这个方法适合上面的background渐变法、 mask遮罩法、 clip-path方法，我们拿clip-path方法举例

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 200px;
        height: 100px;
      }

      .shape {
        width: 100%;
        height: 100%;
        background-color: rgb(102, 177, 255);
        clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);
        position: absolute;
        z-index: 2;
      }

      .shadow1 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 102%;
        height: 104%;
        background-color: rgba(0, 0, 0, 0.5);
        clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);
        transform: translate(-50%, -50%);
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="shadow1"></div>
      <div class="shape"></div>
    </div>
  </body>
</html>

drop-shadow

我们还可以利用drop-shadpw来生成阴影

这个方法适用于background渐变法

js 复制代码

<html>
  <head>
    <style>
      .shape {
        width: 200px;
        height: 100px;
        background: linear-gradient(
          150deg,
          rgb(102, 177, 255) 90%,
          transparent 90%,
          transparent 100%
        );
        filter: drop-shadow(0px 0px 0.5px #000);
      }
    </style>
  </head>
  <body>
    <div class="shape"></div>
  </body>
</html>

同时，多个drop-shadow的叠加，也有了边框的效果

这个方法是在Chokcoco老师那里看见的,最下方有链接

js 复制代码

filter: drop-shadow(0px 0px 0.5px #000) drop-shadow(0px 0px 0.5px #000)
          drop-shadow(0px 0px 0.5px #000);

svg滤镜法

这个方法也是在Chokcoco老师那里学到的

这里用svg的滤镜，借助了feMorphology的扩张能力，为我们的标签生成边框和阴影

这个方法适用于background渐变法

html 复制代码

<html>
  <head>
    <style>
      .shape {
        width: 200px;
        height: 100px;
        background: linear-gradient(
          150deg,
          rgb(102, 177, 255) 90%,
          transparent 90%,
          transparent 100%
        );
        filter: url(#outline);
      }
    </style>
  </head>
  <body>
    <div class="shape"></div>
    <svg width="0" height="0">
      <filter id="outline">
        <feMorphology
          in="SourceAlpha"
          result="DILATED"
          operator="dilate"
          radius="1"
        ></feMorphology>
        <feMerge>
          <feMergeNode in="DILATED" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </svg>
  </body>
</html>