Pavel M.,
эта проблема решается без дополнительных сущностей: <!DOCTYPE html> <html> <head> <title>Test</title> <style> .p1{ width:150px; height:150px; border-radius:100%; position: relative; overflow:hidden; background:green; } .p1:after { width: 100%; height: 100%; position: absolute; top: -50%; left: -50%; border: 75px solid #fff; border-radius: 100%; content: ""; } .p2{ width:400px; height:400px; background:red; border-radius:100%; } </style> </head> <body> <div class="p1"> <div class="p2"> This is Sparta! </div> </div> </body> </html> |
devote,
ну а кто ещё? Чикуёнок? P.S. Ваше решение по результату мало чем отличается от решения ТС. Надпись обрезана и только для однородного фона. И зачем "дополнительная сущность" в HTML-коде? Раз уж использовали один псевдо-элемент, почему не использовать второй? |
Часовой пояс GMT +3, время: 10:08. |