1

Как сделать такой треугольник на 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>

4
  • Обязательно CSS? Может стоит использовать, например, SVG? 22 июл 2017 в 12:22
  • @Alex Chermenin, а посоветуйте, эта стрелка будет на выпадающем меню при наведении на пункт меню. Пунктов меню может быть много, т.к. будет несколько уровней вложенности. Если использовать svg, не будет ли это сильно накладно для dom ?
    – word
    22 июл 2017 в 12:26
  • @Alex Chermenin, подскажите, получается что в конце каждого пункта нужно вставлять svg?
    – word
    22 июл 2017 в 12:41
  • в каждом месте, где нужно использовать стрелку 22 июл 2017 в 12:42

3 ответа 3

2

* {
  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>

5
  • я обновил вопрос. Подскажите, если нужно использовать эту стрелку при ховере на пункт меню, тогда уже лучше использовать svg, чем <div class="arrow-right"></div> ?
    – word
    22 июл 2017 в 12:38
  • @word - какая анимация со стрелкой должна быть при ховере?
    – soledar10
    22 июл 2017 в 12:39
  • анимации со стрелкой нет. Стрелка появляется только при ховере
    – word
    22 июл 2017 в 12:40
  • @word jsfiddle.net/soledar10/qxup8g7w такой вариант подойдет?
    – soledar10
    22 июл 2017 в 12:47
  • благодарю, то что надо
    – word
    22 июл 2017 в 12:53
2

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

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

2
  • если нужно использовать эту стрелку для ховера во всплывающем меню, как правильно сделать? использовать svg? пунктов меню может быть очень много. Т.е. навели курсор на пункт меню, появляется эта стрелка вконце пункта меню, также появляется вложенное меню
    – word
    22 июл 2017 в 12:28
  • получается в конце каждого пункта нужно вставлять svg?
    – word
    22 июл 2017 в 12:39
1

Если использовать 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.