mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
/*
|
|
Turns out that the antialiasing on the outer edge of a block with
|
|
border-radius is not consistent if the width and border-width are changed
|
|
even if the resulting shape should look the same. So clip out the part
|
|
that's too far from the center
|
|
*/
|
|
div.outer {
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: hidden;
|
|
}
|
|
/* We want the following constraints to be satisfied:
|
|
1) Entire inner div content area is contained inside the 100px square.
|
|
2) Entire 100px square is contained inside the outer circle of the inner
|
|
div's border.
|
|
|
|
This requires that the inner div width/height be < 100px and that the
|
|
radius of the outer circle be at least 50 * sqrt(2). Let's go with a 75px
|
|
radius for that outer circle. We then need to shift our inner div up and
|
|
to the left by 25px to center it in the clipping region.
|
|
*/
|
|
|
|
div.inner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 50px solid black;
|
|
background: black;
|
|
border-radius: 100px;
|
|
position: relative;
|
|
top: -25px;
|
|
left: -25px;
|
|
}
|
|
</style>
|
|
<div class="outer"><div class="inner"></div></div>
|