代码之家 › 专栏 › 技术社区 › Alexander Zeitler

响应SVG背景/tailwindcss

tailwind-css svg css

1

Alexander Zeitler · 技术社区 · 6 年前

我想创建一个响应的背景图像平行四边形,只有一边倾斜,使用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响应?

1 回复 | 直到 6 年前

1

2

Nicolas Roehm 6 年前

你可以用 w-full 在父块和 max-width: 100%; 上的CSS属性 parallelogram 班级。见下例:

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