Блог

Главная - Вопросы по программированию - Добавление стрелки в строку или div

Добавление стрелки в строку или div

#jquery #html #css

#jquery #HTML #css

Вопрос:

У меня есть div и я использую его как стрелку. Я смог сгенерировать div, но мне нужно прикрепить стрелку к его вершине.

 div {
  width: 5px;
  height: 220px;
  background-color: red;
  /* Rotate div */
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Chrome, Safari, Opera */
  transform: rotate(30deg);
  transform-origin: bottom left;
}  
 <div>

jsfiddle

https://jsfiddle.net/4j8n45zz/4/

Комментарии:

1. Проверьте cssarrowplease.com чтобы сгенерировать нужную вам css-стрелку.

Ответ №1:

Вы можете создать это с :after помощью псевдоэлемента и просто добавить треугольник сверху.

 div {
  width: 5px;
  height: 220px;
  background-color: red;
  /* Rotate div */
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Chrome, Safari, Opera */
  transform: rotate(30deg);
  transform-origin: bottom left;
  position: relative;
}
div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  transform: translate(-40%, -50%);
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent red transparent;
}  
 <div></div>