54 lines
1.2 KiB
HTML
54 lines
1.2 KiB
HTML
<head>
|
|
<style>
|
|
.outer {
|
|
border: 10px solid black;
|
|
border-radius: 100px;
|
|
overflow: hidden;
|
|
width: 200px;
|
|
height: 100px;
|
|
margin: 10px;
|
|
display: inline-block
|
|
}
|
|
.inner {
|
|
background: #808080;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #FFFFFF;
|
|
-webkit-transform: rotate(45deg) translateZ(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
The white text and grey backgrounds should all clip to the border-radius.<br>
|
|
|
|
<!-- static container -->
|
|
<div class="outer" style="position: static;">
|
|
<div class="inner" style="position: static;">
|
|
static > static
|
|
</div>
|
|
</div>
|
|
|
|
<div class="outer" style="position: static;">
|
|
<div class="inner" style="position: relative;">
|
|
static > relative
|
|
</div>
|
|
</div>
|
|
|
|
<!-- relative container -->
|
|
<div class="outer" style="position: relative;">
|
|
<div class="inner" style="position: static;">
|
|
relative > static
|
|
</div>
|
|
</div>
|
|
|
|
<div class="outer" style="position: relative;">
|
|
<div class="inner" style="position: relative;">
|
|
relative > relative
|
|
</div>
|
|
</div><br>
|
|
<div class="outer" style="position: relative;">
|
|
<div class="inner" style="position: absolute;">
|
|
relative > absolute
|
|
</div>
|
|
</div>
|