響應式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%;
}

我創建了帶有工作示例的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>