Закругленные углы разных цветов css

Всем добрый вечер. Опять обращаюсь к вам за помощью. Суть вопроса состоит вот в чем: нужно сделать блок с закругленными краями одного цвета, и с одним уголком другого цвета.
(скриншот)

Сначала я делал так: создавал блок с границей одного цвета, затем внутри этого блока создавал еще один блок, которому я задавал верхнюю и правую границу нужных мне цветов. Но у меня возник ряд проблем - код был очень объемным, и я не мог нормально задать белые отступы (на скриншоте). Уверен, можно решить мою проблему с минимальным кол-вом кода.

Очень надеюсь на ваши подсказки и советы.

p.s. блок нужно сверстать на цсс, без картинок. старый код был удален, поэтому я не могу показать свои наработки.
0
border-radius css

1 ответов

2
Решение от студии Лебедева. Работает везде, легко изменять картинку.
1

Либо border-image, как верно указал камрад @artuska, либо с помощью псевдоэлементов - что-то вроде такого:


.b-block {
    position: relative;
    }
    .b-block:before {
        content: "";
        position: absolute;
        box-sizing: border-box;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        border: 2px solid;
        border-color: #000 #000 #fff #fff;
        border-radius: 0 50% 0 0;
        }
 

Должно получиться. Можно даже модификаторы создать для блока, если есть необходимость с таких углах не только в обозначенном месте (справа вверху), а и в других углах.
0