How to create custom triangular shape using CSS

Question

I have created a semi-custom shape in div like below

.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>

But I want to further modify it and want to have something like this and am not sure how to do that.

Answer 1

You can easily do this using 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>

another idea with more support is to consider skew transformation:

.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>

A third way with gradient and multiple background:

.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>

With a different syntax:

.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>