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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With