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

Question

[olya_097]

Comments

[Пашенька]

Два квадрата(один из них скруглённый, другой повернутый и можно использовать только его половину) и буква i.

Answer 1

[Тарас Шульга]

Обычный квадрат с псевдоэлментом.
https://codepen.io/angryyum/pen/dyPrppx
А там уже под себя подгоните

Answer 2

[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, в противном случае, фон будет белым.

Comments

[Pavstyuk]

Вот здесь .icon_i:after { z-index: -1;} лишний

[olya_097]

Pavstyuk, спасибо огромное