响应式 SVG 背景 / tailwindcss答案

【问题标题】：Responsive SVG background / tailwindcss响应式 SVG 背景 / tailwindcss
【发布时间】：2019-05-15 01:49:01
【问题描述】：

我想使用 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 响应式？

【问题讨论】：

有什么问题？您希望如何响应？
是的，就是这个问题。
是的，但是怎么做？响应式基于什么？垂直缩放，水平缩放？同样的偏斜？等

标签： css svg tailwind-css

【解决方案1】：

您可以通过父块上的w-full 类和parallelogram 类上的max-width: 100%; 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>

【讨论】：

谢谢，但不知何故 SVG 在调整浏览器窗口大小时似乎保持其大小。