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

【问题标题】：How to create custom triangular shape using CSS如何使用 CSS 创建自定义三角形
【发布时间】：2020-03-31 21:11:37
【问题描述】：

我在 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>

但我想进一步修改它，想要有这样的东西，但不知道该怎么做。

【问题讨论】：

标签： html css css-shapes

【解决方案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>

【讨论】：

并非所有浏览器在所有情况下都支持剪辑路径（Edge??）。您应该在尽可能多的浏览器中测试您的代码。
@pjaj 这就是我提供 3 个解决方案的原因，您可能错过了其中 2 个（我还强调了它们更受支持）
是的，我在您编辑时添加了我的评论。您可以使用几个网站来显示使用各种浏览器的结果。
@pjaj 不需要显示结果。您可以查看此链接caniuse.com 的文档以了解浏览器支持
一个非常有用的网站，但我是老派，没有什么比实际测试您的代码并看到它在任何情况下都能在您的特定应用程序中工作更好的了。尽管如此，一个很好的答案有几个可行的解决方案 +1

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

使用skewX()和transform-origin时，不需要指定left。只需要顶部。由于 skewX() 的计算方式，y 偏移将不起作用。示例：jsfiddle.net/x2kym3zq（请注意动画将如何不执行任何操作）。带有 x 偏移量的 skewY() 的逻辑相同。