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

Question

[butikmy]

пробую через псевдо https://jsfiddle.net/btz5q729/2/
но не совсем так, красное проблематично поставить

Comments

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

Ощущение, что такой вопрос был, с точно таким же бордером, и Ankhena в ответе дала несколько хороших советов по реализации (например с box-shadow). Но что-то не могу найти

[Ankhena]

Владимир Проскурин, да его уже один раз забанили https://qna.habr.com/user/maketosLikes/questions

А это сам вопрос https://qna.habr.com/q/1072266

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

По вашей реализации дам подсказку - нужно сделать так, чтобы after и before были этими самыми бордерами, а основной тег был красным кругом. border на самом теге не нужен

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

Ankhena, ага, ну значит я правильно не стал кидать готовый код :)

[butikmy]

Владимир Проскурин, нужна доп вложенность?

[butikmy]

Владимир Проскурин, почему правильно?

[butikmy]

Владимир Проскурин, я же сам пробовал. а не с нуля прошу

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

butikmy, не нужна, всего один тег, просто отдельные стили для тега, для before и для after. Думайте)

[butikmy]

Владимир Проскурин, пробую https://jsfiddle.net/6g4m0w3j/1/

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

не совсем так
div - это красный круг, у него никаких бордеров, просто заливка
before - первый бордер, без заливок, просто бордер
after - второй бордер, тоже без заливок, просто бордер

div важно делать не бордером, чтобы потом в этот круг можно было что-то положить, ведь в before/after вы не сможете другие элементы положить

Answer 1

[Сергей delphinpro]