Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Баг в Опере c overflow: hidden и border-radius (https://javascript.ru/forum/xhtml-html-css/27118-bag-v-opere-c-overflow-hidden-i-border-radius.html)

devote 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 06.04.2012 00:34

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


Часовой пояс GMT +3, время: 10:08.