@olya_097

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

5e2b129dd2219365828268.jpeg
  • Вопрос задан
  • 227 просмотров
Решения вопроса 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, в противном случае, фон будет белым.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Seryoga96
Начинающий Front End Developer
SVG картинкой сделай, зачем морочить голову.
Можешь PNG картинкой вставить.
Выбирай
Ответ написан
Ваш ответ на вопрос

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

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