Форум

devote · #11 (**permalink**) 05.04.2012, 23:41

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>

Nanto · #12 (**permalink**) 06.04.2012, 00:34

devote,
ну а кто ещё? Чикуёнок?
P.S. Ваше решение по результату мало чем отличается от решения ТС. Надпись обрезана и только для однородного фона.
И зачем "дополнительная сущность" в HTML-коде? Раз уж использовали один псевдо-элемент, почему не использовать второй?

Форум

Справочник

Discord чат

Курсы javascript