4

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.

enter image description here

Improve this question

2 Answers 2

Reset to default
7

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

clip-path may not be supported by all browsers under all circumstances (Edge??). You should test your code in as many browsers as you can find.
@pjaj that's why I provided 3 solutions, you probably missed 2 of them (where I also highlighted that they are more supported)
Yes, I was adding my comment as you were editing. There are several sites that you can use that will display the results of using a whole range of browsers.
@pjaj no need to display result. You can either check the documentation of this link caniuse.com to know the browser support
A very useful site, but I'm old school, nothing beats actually testing your code and seeing that it works in your specific application under all circumstances. Nevertheless, an excellent answer with several viable solutions +1
|
0

You could combine two skewed pseudo elements for your shape. Note the gold colour can be removed and is included for example purposes only.

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>

Improve this answer

1 Comment

when using skewX() and transform-origin, you don't need to specify left. only top is needed. The y-offset will have no effect due to how skewX() is computed. Example: jsfiddle.net/x2kym3zq (notice how the animation will do nothing). Same logic for skewY() with the x-offset.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.