CSS 如何扭曲/弯曲图像或 div？

Question

你好，

是否可以仅使用 CSS 来实现这种效果？

如您所见，顶部的图像与内部的文本一起变形，看起来像下面的图像。它可能是一个 div 或一个图像。我一直在研究变换，但对曲线一无所知。

这不是重复的，因为我不是在问如何仅弯曲文本，而是询问 div 容器以及图像。

谢谢你。

Answer 1

我不知道你是否会在技术上将其限定为“仅 CSS”，因为它使用 SVG 过滤器，但我认为它可以实现你想要的扭曲类型。

.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>

这是一个很好的教程，介绍了使用此技术可以实现的一些很酷的效果：https://www.creativebloq.com/how-to/add-svg-filters-with-css