CSS how to warp/bend an image or div?

Question

Hi,

Is it possible to achieve this effect with CSS only?

As you can see, the image on top is distorted along with the text inside to look like the one below. It may be a div or an image. I have been researching on transform but found nothing about curves.

This is NOT a duplicate because I am not asking how to curve the text only but the div container as well as in case of an image.

Thank you.

Possible duplicate of [Is there a way to curve / arc text using CSS3 / Canvas](http://stackoverflow.com/questions/2840862/is-there-a-way-to-curve-arc-text-using-css3-canvas). See the 3rd answer for the pure CSS way. — 4castle, May 19 '16 at 21:47
svg does it too ... or an img with an alt attribute to make sure it is seen everywhere:) — G-Cyrillus, May 19 '16 at 21:53

score 1 · Answer 1 · answered Feb 15 '23 at 10:10

I don't know if you would technically qualify this as "CSS only" since it is using an SVG filter, but I think it could be made to achieve the type of warping you want.

.warped {
  display: inline-block;
  background-color: yellow;
  padding: 4px;
  filter: url(#displacement);
}
#filterSource {
  display: none;
}

<span class="warped">Warped Text!</span>
<div>
  <svg id="filterSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="displacement" filterUnits="userSpaceOnUse">
      <!-- this is just a base64 encoded PNG with a simple linear gradient -->
      <!-- this may not be exactly what you want, but you can adjust the R and B channels to displace the element however you like. -->
      <feImage href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGlJREFUaIHtz6ENwEAMxVBfUWn3H7Kw8LpCdMjAT/osIF7AZuAGnsMt4D3cN3kOuIZ3eoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNj9ceBBjuV6HJAAAAABJRU5ErkJggg==" result="dispMap" />
      <feDisplacementMap
        in="SourceGraphic"
        in2="dispMap"
        scale="10"
        xChannelSelector="B"
        yChannelSelector="R" />
    </filter>
  </defs>
  </svg>
</div>

Here's a nice tutorial on some cool effects you can achieve with this technique: https://www.creativebloq.com/how-to/add-svg-filters-with-css

CSS how to warp/bend an image or div?

1 Answers1