HR 스타일링을위한 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>