@antonio0226

Как сделать маленький уголок вниз?

Привет всем, как сделать маленький треугольник вниз, как на картинке?
5a685159acc74854595294.png

Уже думал делать с помощью :after и в контент прописать что то типа \\/, но т.к у меня изначально прямоугольник, сверху у меня будет линия, а мне нужно без нее. Спасибо заранее.
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
@lemme
Frontend
<div></div>

div {
  position: relative;
  width: 200px;
  height: 150px;
  background: #fff;
  border: 1px solid #ccc;
}

div::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  width: 10px;
  height: 10px;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: #ccc;
  transform-origin: center;
  transform: translateY(-50%) rotate(135deg);
  background: #fff;
  margin-top: 1px;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@bogomazov_vadim
Ответ написан
Комментировать
Застилизировать :after при помощью border, чтобы получился треугольник. Используйте этот генератор apps.eky.hk/css-triangle-generator/. Потом просто абсолютное позиционирование относительно родителя
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы