how can i make divs with irregular shape [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
how can i create a two divs shown in images one div should be in pink color and other one in blue color.I want to create same shapes like in this example but with using two divs
example Image

Answer 1

Using css transform skew property you can skew the right container and shift it to the left. Note the right end of the skewed container is strategically hidden by applying an overflow hidden property to the parent container
Snippet below
#container {
width: 700px;
height: 200px;
white-space: nowrap;
overflow: hidden;
}
#left {
position: relative;
width: 70%;
height: 100%;
display: inline-block;
background-color: #ED145B;
}
#right {
position: relative;
width: 20%;
height: 100%;
display: inline-block;
background-color: #212635;
}
#right {
transform: skew(-30deg, 0deg);
-moz-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
-o-transform: skew(-30deg, 0deg);
-ms-transform: skew(-30deg, 0deg);
right: 10%;
width: 500px;
}
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

Answer 2

.skew {
width: 10px;
height: 100px;
background: black;
-webkit-transform: skew(0deg); /* Chrome, Opera */
-ms-transform: skew(0deg); /* IE */
transform: skew(0deg); /* Padrão */
}
.positive {
-webkit-transform: skew(10deg); /* Chrome, Opera */
-ms-transform: skew(10deg); /* IE */
transform: skew(10deg); /* Padrão */
}
.negative {
-webkit-transform: skew(-10deg); /* Chrome, Opera */
-ms-transform: skew(-10deg); /* IE */
transform: skew(-10deg); /* Padrão */
}
<span>0 DEG</span>
<div class="skew"></div>
<span>10 DEG</span>
<div class="skew positive"></div>
<span>-10 DEG</span>
<div class="skew negative"></div>