<div class="parent-element">
<div class="clipped-element"></div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 3rem;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.parent-element {
filter: drop-shadow(10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(20rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-20rem 0 0 rgba(0, 30, 200, 0.8));
transition: filter 600ms;
}
.parent-element:hover {
filter: drop-shadow(0 0 0 rgba(0, 30, 200, 0.8));
}
.clipped-element {
width: 20rem;
height: 20rem;
margin: 0 auto;
background-color: deeppink;
clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.