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, время: 18:51. |