Справка CSS для стилизации кадров [дубликат]

Question

Мне нужно решить, как добиться стиля дизайна ниже с помощью тега HR. HR должен быть двух цветов и иметь угол между ними. Я бы предпочел, чтобы я мог добиться этого с помощью чистого CSS. Нет файлов IMG.

Кто-нибудь знает, как этого добиться?

hr{
position:relative;
height:3px;
background-color:#7902AA;
}

hr:before {
position:absolute;
content : ' ';
left:0;
right:0;
height:3px;
top:-1px;
background-color:#FFD800;
}

<h1>
The Equality Network is an independent organisation founded to establish LGBTIQ+ inclusivity in the workplace and broader community.
</h1>
<hr>
<p>
The Equality Network has pioneered a new benchmark in acceptable standards for LGBTIQ+ inclusivity training in the workplace and community. 
</p>

Answer 1

Вы можете использовать линейный градиент с многопозиционными ограничителями цвета и углом 135 градусов:

hr {
  height: 0.25em;
  border: none;
  background: linear-gradient(135deg, yellow 0% 50%, purple 50% 100%);
}

<hr>