<!DOCTYPE html> | |
<style> | |
.clipped { | |
width: 100px; | |
height: 200px; | |
background-color: green; | |
-webkit-clip-path: polygon(0% 0%,100% 0%,100% 50%,0% 50%); | |
clip-path: polygon(0% 0%,100% 0%,100% 50%,0% 50%); | |
} | |
.abs { | |
position: absolute; | |
width: 200px; | |
height: 200px; | |
} | |
</style> | |
<div class="abs"> | |
<div class="clipped" style="position: absolute; overflow: hidden"> | |
<div class="abs" style="transform: translate(0px, 100px); background-color: red;"></div> | |
</div> | |
</div> |