Responsive SVG background / tailwindcss

Question

I want to create a responsive background image parallelogram with only one side skew using CSS and text in front of it. Also it should overlay two different background colors.

This is what I want to achieve:

This is my 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%;
}

I created a CodePen with a working sample but I can't get the SVG to be responsive.

So the question is: how to make the SVG responsive?

Answer 1

You can achieve this with the w-full class on the parent block and the max-width: 100%; CSS property on your parallelogram class. See example below :

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