This is how you could do it using clip-path, which replaced the deprecated clip property:
.outer {
background-color: rgba(0,0,255,.5);
width: 100px;
height: 100px;
margin: 100px;
clip-path: inset( -100vw -100vw -100vw 0 );
}
.inner {
background-color: rgba(255,0,0,.5);
width: 200px;
height: 80px;
position: relative;
top: 10px;
left: -50px;
}<div class="outer">
<div class="inner"></div>
</div>Note that, as of December 2017, browser support isn’t very good.
Further reading:
- MDN:
clip-path - CSS-Tricks:
clip-path