Как реализовать такую горизонтальную линию?

Question

Подскажите пожалуйста как реализовать такую горизонтальную линию:

вот мой код:

* {
  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>

Answer 1

Вот так проще всего

.gradient {
  height: 20px;
  background: linear-gradient(115deg, hsl(30, 85%, 70%) 70%, hsl(0, 0%, 57%) 71%);
}

<div class="gradient"></div>

БЛОГ НА HUSL

Как реализовать такую горизонтальную линию?

Ответы (1 шт):