Какие способы реализовать обрезанную круглую рамку?

Question

[gracer]

Добрый день. Подскажите способы реализации подобных рамок.

Answer 1

[Максим Тимофеев]

https://codepen.io/wokster/pen/MzbmLO
или как вариант все тоже самое но для псевдоэлемента :before, что бы не вращать контент
Можно конечно и svg, но в данном случае избыточно. Голый css отлично справляться. Это если надо что-то сложнее или анимацию сложную, тогда svg.

Comments

[gracer]

Спасибо, хотелось бы, правда, иметь возможность регулировать разрыв по размеру. Не трудно будет показать как на svg это будет выглядеть?

Answer 2

[Владимир Проскурин]

Создаете два блока, даете им нужную рамку и поворачиваете.

Answer 3

[nvdfxx]

псевдоэлемент цвета фона поверх бордера, не?