Треугольник на css без заливки

444

24 июля 2017, 14:13

Как сделать такой треугольник на css?
При этом треугольник по высоте растянут, не равносторонний
Посоветуйте, если эту стрелку нужно показывать только при наведении на пункт меню, нужно ли здесь использовать svg? Пунктов меню может быть очень много из-за вложенности
Получается в конце каждого пункта нужно вставлять svg?

<ul> 
  <li><a href="#">title</a> 
    <ul> 
      <li><a href="#">title</a> 
         <ul> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
          </ul> 
      </li> 
      <li><a href="#">title</a> 
         <ul> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
          </ul> 
      </li> 
            <li><a href="#">title</a> 
         <ul> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
          </ul> 
      </li> 
    </ul> 
  </li> 
    <li><a href="#">title</a> 
    <ul> 
      <li><a href="#">title</a> 
         <ul> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
          </ul> 
      </li> 
      <li><a href="#">title</a> 
         <ul> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
          </ul> 
      </li> 
            <li><a href="#">title</a> 
         <ul> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
            <li><a href="#">title</a> 
          </ul> 
      </li> 
    </ul> 
  </li> 
</ul>

Answer 1

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.arrow-right { 
  position: relative; 
  margin: 30px; 
  width: 40px; 
  height: 40px;   
} 
.arrow-right:before, 
.arrow-right:after{ 
  content: ''; 
  position: absolute; top: 50%; left: 50%; 
  width: 24px; 
  height: 1px; 
  background: tomato; 
} 
.arrow-right:before{   
  margin: -10px 0 0 -12px;   
  transform: rotate(55deg);   
} 
.arrow-right:after{   
  top: auto; bottom: 50%; 
  margin: 0 0 -10px -12px;   
  transform: rotate(-55deg);   
}

<div class="arrow-right"></div>

Answer 2

Почему бы не использовать svg?

<svg> 
  <polyline fill="none" stroke="black"  
      points="0,0 4,6 0,12"/> 
</svg>

Answer 3

Если использовать css, то только псевдо-элементами :before и :after

.arrow-right{ 
  position: relative; 
  top: 100px; 
  left: 100px; 
} 
 
.arrow-right:before{ 
  content: ' '; 
  position: absolute; 
  height: 2px; 
  width: 20px; 
  background-color: #444; 
  transform: rotate(45deg); 
} 
 
.arrow-right:after{ 
  content: ' '; 
  position: absolute; 
  top: 13px; 
  height: 2px; 
  width: 20px; 
  background-color: #444; 
  transform: rotate(-45deg); 
} 
 
.arrow-left{ 
  position: relative; 
  top: 100px; 
  left: 130px; 
} 
 
.arrow-left:before{ 
  content: ' '; 
  position: absolute; 
  height: 2px; 
  width: 20px; 
  background-color: #444; 
  transform: rotate(-45deg); 
} 
 
.arrow-left:after{ 
  content: ' '; 
  position: absolute; 
  top: 13px; 
  height: 2px; 
  width: 20px; 
  background-color: #444; 
  transform: rotate(45deg); 
}

<div class="arrow-right"></div> 
<div class="arrow-left"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как создать такую таблицу?

Подскажите, как создать такую таблицу, приведённую на рисунке? В таблице разные по ширине колонки, и по разному прижат текст (влево, вправо,...

318

MySQL

Как вставить русский текст в sql запрос?

Пытаюсь выполнить

327

MySQL

Анализ записей таблицы и очистка от невалидных данных

Доброго времени суток

285

MySQL

Создание триггера по типу cron-демона

Существует ли возможность создания триггера для MariaDB или MySQL, который бы выполнялся с определённой периодичностьюНапример, удалял записи...

231