响应式SVG背景/ tailwindcss

Question

我想使用CSS和前面的文字来创建仅具有一侧偏斜的响应式背景图像平行四边形。另外，它应该覆盖两种不同的背景颜色。

这是我想要实现的：

这是我的CSS：

.parallelogram {
  width: 20rem; 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.66 97.59'><title>Asset 1</title><g id='Layer_2' data-name='Layer 2'><g id='Ebene_1_Kopie' data-name='Ebene 1 Kopie'><polygon points='0 0 0 97.59 281.83 97.59 311.66 0 0 0'/></g></g></svg>");
  background-size: 20rem 100%;
}

我用一个有效的示例创建了a CodePen，但我无法使SVG响应。

所以问题是：如何使SVG具有响应能力？

Answer 1

您可以通过父块上的w-full类和max-width: 100%;类的parallelogram CSS属性来实现。参见下面的示例：

.parallelogram {
  max-width: 100%;
  width: 20rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.66 97.59'><title>Asset 1</title><g id='Layer_2' data-name='Layer 2'><g id='Ebene_1_Kopie' data-name='Ebene 1 Kopie'><polygon points='0 0 0 97.59 281.83 97.59 311.66 0 0 0'/></g></g></svg>");
  background-size: 100% 8rem;
}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto bg-white pt-12">
  <div class="flex">
    <div class="w-1/4 bg-white h-12">Lorem ipsum dolor sit amet</div>
    <div class="w-3/4 bg-white h-full">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      <p class="pb-12"></p>
      <p class="pb-12"></p>
    </div>
</div>
<div class="flex absolute h-32 w-full" style="margin-top: -4rem">
    <div class="flex text-white h-32 uppercase parallelogram">
        <div class="self-center italic text-2xl font-bold ml-20">Hey <br/>What's up?</div>
    </div>
</div>
  <div class="flex bg-red  pt-12"></div>
<div class="flex bg-red text-white pt-12">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>