如何使用 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>

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

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>

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>