Адаптивный фон SVG / tailwindcss - PullRequest
Новая
       53

Адаптивный фон SVG / tailwindcss

0 голосов
/ 13 декабря 2018

Я хочу создать параллелограмм адаптивного фонового изображения с перекосом только одной стороны, используя CSS и текст перед ним.Также он должен перекрывать два разных цвета фона.

Вот чего я хочу добиться:

enter image description here

Это мой 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.отзывчивый?

1 Ответ

0 голосов
/ 13 декабря 2018

Этого можно добиться с помощью класса w-full в родительском блоке и свойства max-width: 100%; CSS в вашем классе parallelogram.См. Пример ниже:

enter image description here

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