3D Box Styling Using ::After Element
December 8, 2021Coupon Button
December 27, 2021
<div class="box">
<figure class="image">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8cG9ydHJhaXR8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80" alt="">
</figure>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem omnis, debitis aliquam culpa provident doloremque dolorem dolores at magni suscipit id molestiae autem animi cum saepe quidem error voluptate ipsum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi beatae modi veniam placeat cupiditate, pariatur ipsa exercitationem corrupti! Exercitationem tenetur ducimus, porro provident consequatur enim odit ipsam quidem id excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi beatae modi veniam placeat cupiditate, pariatur ipsa exercitationem corrupti! Exercitationem tenetur ducimus, porro provident consequatur enim odit ipsam quidem id excepturi.
</div>
</div>
.box{
width:500px;
margin:10rem auto;
background:#16817a;
padding:2rem;
height:300px;
color:white;
}
.image{
width:10rem;
height:10rem;
float: left;
clip-path: circle(50% at 50% 50%);
shape-outside:circle(50% at 50% 50%);
}
.image img{
width:100%;
}
