Restyling two adjacent divs with css - html

Question

I am assigned a task to design two divs like this
And here is what I have tried so far, I would like to restyle it with some css.
I would really appreciate any help with the styling. ( It doesn't have to be the same as the given image).
Thank you.
Here are my HTML and CSS code
HTML CODE:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .stage+.stage {
margin-left: 30px;
}
.stage:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 100px solid transparent;
border-left: 10px solid white;
border-bottom: 110px solid transparent;
margin: -10px 0px 0 0px;
}
.stage:after {
color: #4D81BF;
border-left: 20px solid;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
top: 0;
}
.stage {
background-color: #4D81BF;
/*width: 150px; */
height: 200px;
line-height: 40px;
display: inline-block;
position: relative;
}
.stage {
color: ;
font-weight: bold;
padding-left: 10px;
font-family: Arial;
font-size: 11;
}
#it,
#isms,
#bul {
color: white;
}
#it {
border: 3px solid white;
background-color: green;
}
#isms,
#bul {
border: 3px solid white;
background-color: orange;
}
<div class="container">
<div class="stage">
<span class="blocktext">Stage Confirm</span>
<div id="it">IT CONFIRM</div>
<div id="isms">ISMS Confirm</div>
</div>
<div class="stage">
<span class="blocktext">Stage Approve</span>
<div id="bul">Bul Approve</div>
</div>
</div>

Answer 1

I believe this will help you. I'd like to clean whole CSS, but didn't want to make to many changes to your original code, so you won't be confused.
.button {
width: 200px;
padding: 0 10px;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .stage+.stage {
margin-left: 30px;
}
.stage:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 95px solid transparent;
border-left: 70px solid white;
border-bottom: 95px solid transparent;
margin: -20px 0px 0 0px;
}
.stage:after {
color: #4D81BF;
border-left: 70px solid;
border-top: 95px solid transparent;
border-bottom: 95px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -70px;
top: 0;
}
.stage {
background-color: #4D81BF;
/*width: 150px; */
height: 150px;
line-height: 40px;
display: inline-block;
position: relative;
margin: 20px;
font-weight: bold;
padding: 20px 40px 20px 100px;
font-family: Arial;
font-size: 11;
}
#it,
#isms,
#bul {
color: white;
}
#it {
border: 3px solid white;
background-color: green;
margin: 0 0 10px 0;
}
#isms,
#bul {
border: 3px solid white;
background-color: orange;
}
<div class="container">
<div class="stage">
<span class="blocktext">Stage Confirm</span>
<div id="it" class="button">IT CONFIRM</div>
<div id="isms" class="button">ISMS Confirm</div>
</div>
<div class="stage">
<span class="blocktext">Stage Approve</span>
<div id="bul" class="button">Bul Approve</div>
</div>
</div>