CODEWITHSUNDEEP
htmlcss
rareyesdev
rareyesdev

Reputation: 2427

CSS bend image and add shadow

I have an image and want to display it like this:

The attached image shows exactly how it should look (white rectangle contains the original image).

I tried this answer but I don't have the CSS skills to archive all three requirements. (got stuck with shadow direction and bending)

image

Upvotes: 0

Views: 2235

Answers (1)

B.P
B.P

Reputation: 171

check this

<div class="box effect">
    <h3>Effect</h3>
</div>

css:

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:20%;
    height:200px;
    background:#E8C300;
    margin:40px auto;

}


.effect
{
  position: relative;
}
.effect:before, .effect:after
{
      z-index: -1;
    position: absolute;
    content: "";
    bottom: 0;
    left: 10px;
    width: 10px;
    height: 50%;
    max-height: 300px;
    background: rgba(119, 119, 119, 0);
    box-shadow: -14px -1px 7px #777;
    transform: rotate(5deg);
}
.effect:after
{
     transform: rotate(-5deg);
    top: 0px;
    left: 10px;
}

https://jsfiddle.net/84me6p6b/2

Upvotes: 2

Related Questions