عمل اطار خارج الصورة

فكرة عمل اطار خارج الصورة باستخدام الـ before و الـ after

عمل اطار خارج الصورة

html

<div>
    <img src="1.webp" alt="">
</div>

css

div {
   width: 300px;
   height: 300px;
   position: relative;
}
img {
   width: 100%;
   height: 100%;
}
div::before,
div::after {
   content: "";
   position: absolute;
   width: 100px;
   height: 360px;
   top: -45px;
   border: 15px solid #000;
}
div::before {
   right: 40px;
   border-left-color: transparent;
}
div::after {
   left: 40px;
   border-right-color: transparent;
   z-index: -1;
}
مصدر الاكواد