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

Question

[antonio0226]

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


Уже думал делать с помощью :after и в контент прописать что то типа \\/, но т.к у меня изначально прямоугольник, сверху у меня будет линия, а мне нужно без нее. Спасибо заранее.

Answer 1

[lemme]

<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;
}

Comments

[antonio0226]

То что нужно.

Answer 2

[Vadim Bogomazov]

Тыц

Answer 3

[Андрей Саныч]

Застилизировать :after при помощью border, чтобы получился треугольник. Используйте этот генератор apps.eky.hk/css-triangle-generator/. Потом просто абсолютное позиционирование относительно родителя