<div class="design">
<img src="http://i.pravatar.cc/500?img=2" alt="">
</div>
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.design {
position: relative;
height: 300px;
width: 300px;
}
.design > * {
position: absolute;
height: 100%;
width: 100%;
}
.design {
&::before,
&::after {
content: '';
transform: rotate(45deg);
width: 100%;
height: 100%;
box-sizing: border-box;
border: 15px solid #eb311f;
position: absolute;
left: 0;
top: 0;
filter: drop-shadow(0 0 5px #eb311f);
}
&::before {
border-color: transparent #eb311f;
z-index: 1;
}
img {
z-index: 2;
}
&::after {
border-color:#eb311f transparent ;
z-index: 3;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.