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

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

How to create custom triangular shape using CSS

html

css

css-shapes