Как сделать данный блок?

Question

[Mars Cossado]

Нужно сделать блок с такой формой, помогите.

Comments

[Сергей delphinpro]

скруглить углы - border-radius
задать фон - background-color
тень - box-shadow
уголок - абсолютно (position:absolute) позиционированный маленький квадратик (псевдоэлемент, ::before), повернутый на 45 градусов (transform:rotate(45deg))

Answer 1

[Егор Астрейко]

<div class="toolTip">
        <p class="toolTip__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio dolore ipsam iste nobis pariatur possimus quia, quidem quisquam quos?</p>
        <!-- /.toolTip__content -->
    </div>
    <!-- /.toolTip -->

.toolTip {
  width: 400px;
  height: 150px;
  background-color: #ebebeb;
  border-radius: 5px;
  margin-left: 50px;
  position: relative;
  padding: 20px;

  &::before {
    content: "";
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    position: absolute;
    left: -15px;
    top: 30%;
    background-color: #ebebeb;
  }
}

Comments

[Егор Астрейко]

я сделал :before квадратом и повернул на 45 градусов, а можно сделать before треугольником, но суть думаю понятна

Answer 2

[Андрей Dobrin]

Держи это как вариант.
Там разделили тебе, чтоб было понятно)