如何使用CSS创建自定义三角形形状

Question

我已经在div中创建了一个半自定义形状，如下所示：

.myDiv {
  border-bottom: 300px solid #FFC20F;
  border-right: 150px solid transparent;
  height: 0;
  width: 265px;
}

.myDiv p {
  color: white;
  padding: 40px 0 0 50px;
}

<div class="myDiv">
  <p>Some text</p>
</div>

但我希望进一步修改它，并且想要像这样的东西，但不确定如何做到这一点。

- Bogaso

Answer 1

你可以轻松地使用 clip-path 来完成这个操作：

.box {
  width:200px;
  height:200px;
  background:#FFC20F;
  clip-path: polygon(0% 0%, 80% 0, 100% 30%, 60% 100%, 0% 100%);
}

<div class="box">

</div>

更受支持的另一个想法是考虑斜向变换：

.box {
  width:200px;
  height:200px;
  position:relative;
  overflow:hidden;
  z-index:0;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  background:#FFC20F;
 }
.box:before {
  top:0;
  height:30%;
  transform:skew(40deg);
  transform-origin:bottom;
}
.box:after {
  bottom:0;
  height:70%;
  transform:skew(-30deg);
  transform-origin:top;
}

<div class="box">

</div>

一种使用渐变和多重背景的第三种方法：

.box {
  width:200px;
  height:200px;
  background:
    linear-gradient(225deg,transparent 30%,#FFC20F 30%)  top   /100% 30%,
    linear-gradient(-59deg,transparent 36%,#FFC20F 36%)  bottom/100% 70%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

使用不同的语法：

.box {
  width:200px;
  height:200px;
  background:
    /* top right triangle */
    linear-gradient(to bottom left,transparent 50%,#FFC20F 50.5%)  top    right/30% 30%,
    /* bottom right triangle*/
    linear-gradient(to top    left,transparent 50%,#FFC20F 50.5%)  bottom right/50% 70%,
    /* top left rectabgle */
    linear-gradient(#FFC20F,#FFC20F)top    left/70% 30%,
    /* bottom left rectabgle */
    linear-gradient(#FFC20F,#FFC20F)bottom left/50% 70%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

- Temani Afif

---

clip-path 可能在某些情况下（Edge??）不被所有浏览器支持。您应该在尽可能多的浏览器中测试您的代码。 - pjaj

@pjaj，这就是为什么我提供了3个解决方案，你可能错过了其中的2个（我还强调了它们更受支持）。 - Temani Afif

是的，当你在编辑时，我正在添加我的评论。有几个网站可以使用，它们将显示使用整个浏览器范围的结果。 - pjaj

@pjaj 不需要显示结果。你可以查看这个链接的文档https://caniuse.com/来了解浏览器支持情况。 - Temani Afif

@TemaniAfif 抱歉，我没有看到你的倾斜答案。我建议使用不同的变换原点，但总体而言，这是一个全面的答案，提供了几个选项。 - jbutler483

Answer 2

你可以组合两个倾斜的伪元素来创建形状。请注意，黄金颜色可以去除，只是作为示例。

div {
  height: 200px;
  width: 600px;
  background: gold;
  position: relative;
  overflow: hidden;
}

div:before,
div:after {
  content: "";
  position: absolute;
  left: 0;
  background: cornflowerblue;
  width: 100%;
}

div:before {
  top: 0;
  height: 20%;
  transform: skewX(20deg);
  transform-origin:bottom left;
}
div:after {
  top: 20%;
  height: 80%;
  transform: skewX(-20deg);
  transform-origin:top left;
}

<div></div>

- jbutler483

---

当使用skewX()和transform-origin时，您不需要指定left，只需要指定top即可。由于skewX()的计算方式，y偏移量将不起作用。例如：https://jsfiddle.net/x2kym3zq/（请注意动画将不会有任何变化）。对于skewY()和x偏移量也是同样的逻辑。 - Temani Afif