2

Нужно сделать такую стрелку на css.высота стрелки 10px.

введите сюда описание изображения

2
  • Используйте ::before, ::after и border и будет вам счастье.
    – And
    28 июл 2019 в 6:43
  • а как бордер правильно использовать
    – btcfakir
    28 июл 2019 в 6:54

2 ответа 2

3

Используйте 2 бордера и transform:rotate(45deg);

.arrow {
  width: 30px; 
  height: 30px; 
  background-color: #f61;
}

.arrow:after {
  content: '';
  display: block;
  border-right: solid #fffa;
  border-top: solid #fffa;
  width: 7px;  /* sqrt(7*7 + 7*7) */ 
  height: 7px; /* это примерно 10 */
  transform: translate(8px, 10px) rotate(45deg);
}
<div class="arrow"></div>

3
  • подскажите пж как его позиционировать теперь
    – btcfakir
    28 июл 2019 в 7:10
  • он у меня в другом блоке и я хочу ему сделать падинг справа но стрелка деформируется
    – btcfakir
    28 июл 2019 в 7:11
  • если покажете - исправлю 28 июл 2019 в 7:12
-1

Добавьте новый код:

css >

img {
  width: 10px;
  height: 10px;
}

html>

  <img src="..." style="width: 10px; height: 10px;" alt="...">
  <img src="..." width="10" height="10" alt="...">

Ваш ответ

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

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