html - 如何用白色笔画制作圆角梯形？

Question

我正在尝试制作一个带有白色笔划的梯形，但似乎无法弄清楚如何正确地做到这一点。

目标：

目前有：

.trapezoid {
  height: 0;
  width: 65px;
  border-bottom: 40px solid #31cae8;
  border-left: 10px solid transparent;
  border-radius: 5px;
  position: absolute;
  z-index: 100;
  border-right: 10px solid transparent;
  text-align: center;
  color: white
}

.trapezoid2 {
  height: 0;
  width: 80px;
  left: 0;
  border-bottom: 50px solid white;
  border-left: 12px solid transparent;
  border-radius: 5px;
  border-right: 12px solid transparent;
  text-align: center;
  color: white
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background:pink;
}

<div class="flex">
  <div class="trapezoid"></div>
  <div class="trapezoid2"></div>
</div>

标签： htmlcsscss-shapes

Answer 1

通过一些转换，您可以做到：

.box {
  width: 150px;
  height: 100px;
  margin: 15px;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: lightblue;
  border: 5px solid #fff;
  border-radius: 15px;
  transform: perspective(200px) rotateX(30deg); /* this will do the trick */
}

/* the arrow shape */
.box::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
}
/**/
body {
  background: pink;
}

<div class="box">

</div>

也像下面的倾斜变换：

.box {
  width: 150px;
  height: 80px;
  margin: 15px;
  position: relative;
}

.box::before,
.box::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width:50%;
  background: lightblue;
  border: 5px solid #fff;
  transform-origin:bottom;
}
.box::before {
  border-radius:15px 0 0 15px;
  border-right:0;
  left:0;
  transform:skew(-10deg);
}
.box::after {
  border-radius:0 15px 15px 0;
  border-left:0;
  right:0;
  transform:skew(10deg);
}

body {
  background: pink;
}

<div class="box">

</div>