Как я могу сделать заостренную стрелку с div в CSS

Как я могу сделать заостренную стрелку с div в CSS

Как я могу сделать заостренную стрелку в CSS? Не просто треугольник, а тот со стержнем, как традиционная стрела, которая будет выпущена из лука?

Я пытаюсь сделать это путем создания контейнера div, содержащего два контейнера, левый и правый. Справа будет находиться треугольник, а слева — три элемента, центр которых будет окрашен для создания основы.

Вот мой код:

HTML:

 {amp}lt;div id="main"{amp}gt; {amp}lt;div class='arrowblock'{amp}gt; {amp}lt;div class='arrowright'{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class='rectcontainer'{amp}gt; {amp}lt;div class='rect'{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class='rect' style='background-color:green'{amp}gt; {amp}lt;/div{amp}gt;{amp}lt;div class='rect'{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

CSS:

 .rectcontainer { height:30px; width:100px; } .arrowblock { width:130px; border-top: 15px solid transparent; } .arrowright { float:right; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 30px solid green; } .rect { width:100px; height:10px; background-color:transparent; } 

Есть ли более простой способ добиться этого?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector