Подскажите пожалуйста как реализовать такую горизонтальную линию:
вот мой код:
* {
margin: 0;
padding: 0;
}
.line {
height: 40px;
width: 100%;
position: relative;
display: flex;
}
.line-left {
width: 80%;
height: 40px;
background: red;
}
.line-right {
width: 20%;
height: 40px;
background: black;
}
.line-right:before {
content: '';
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 140px solid green;
border-bottom: 40px solid transparent;
}
<div class="line">
<div class="line-left">
</div>
<div class="line-right">
</div>
</div>