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

498

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

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

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

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

369

MySQL

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

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

377

MySQL

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

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

323

MySQL

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

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

271