| <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> |
