@olya_097

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

5e2b129dd2219365828268.jpeg
  • Вопрос задан
  • 235 просмотров
Решения вопроса 2
AngryYumy
@AngryYumy
Заплати фрилансеру чеканой монетой
Обычный квадрат с псевдоэлментом.
https://codepen.io/angryyum/pen/dyPrppx
А там уже под себя подгоните
Ответ написан
Комментировать
@Pavstyuk
.icon_i {
            position: relative;
            display: inline-block;
            width: 2em;
            height: 2em;
            line-height: 2em;
            font-size: 1em;
            color: red;
            text-align: center;
            font-style: italic;
            font-family: serif;
            border: 0.125em solid red;
            border-radius: 0.25em;
            z-index: 1;
            box-sizing: border-box;
            background-color: #fff;
            background-color: inherit;
        }

        .icon_i:after {
            content: '';
            position: absolute;
            left: calc(50% - 0.25em);
            bottom: -0.385em;
            width: 0.5em;
            height: 0.5em;
            border-right: 0.125em solid red;
            border-bottom: 0.125em solid red;
            z-index: -1;
            transform: rotate(45deg);
            box-sizing: border-box;
            background-color: inherit;
        }


Как-то так. Но проблема с фоном. Будет работать только если у родительского элемента указан background-color, в противном случае, фон будет белым.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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