Как сверстать такое на CSS?

Question

У этого "div"-а внизу маленькая стрелка если заметили, как сделать это?

Answer 1

Можно с помощью псевдоэлемента сделать:

.tooltip {
  color: white;
  width: 100px;
  background-color: black;
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}
.tooltip:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: auto;
  border: 5px solid transparent;
  border-top: 10px solid black;
}

<div class="tooltip">Lesson Name</div>

Answer 2

Треугольники обычно делаются через трюк с border:

.triangle {
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

.triangle.to-bottom {border-top-color: red;}
.triangle.to-left {border-right-color: blue;}
.triangle.to-right {border-left-color: orange;}
.triangle.to-top {border-bottom-color: green;}

<div class="triangle to-bottom"></div>
<div class="triangle to-left"></div>
<div class="triangle to-right"></div>
<div class="triangle to-top"></div>

БЛОГ НА HUSL

Как сверстать такое на CSS?

Ответы (2 шт):