Как сохранить область содержимого внутри формы SVG, не перемещаясь за пределы формы при изменении размера окна - PullRequest
Новая
       9

Как сохранить область содержимого внутри формы SVG, не перемещаясь за пределы формы при изменении размера окна

0 голосов
/ 02 мая 2018

Мне нужно поместить фигуру SVG треугольника на задний план и разместить несколько текстов на этой фигуре. Я попробовал это. но при изменении размера окна содержимое перемещается наружу. Мне нужно держать область содержимого внутри треугольной формы.

И мне нужно знать, что для этого лучше всего использовать контейнер или контейнер-жидкость.

Ниже изображение показывает, что мне нужно
https://i.stack.imgur.com/rwPxF.jpg

Это пример, который я попробовал. 

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}

div {
  display: block
}

section.services {
  width: 100%;
}

.class50 {
  float: left;
  width: 50%
}

.svg-content {
  position: relative;
  margin-top: -10%;
}

.class50_content {
  position: absolute;
  top: 35%;
  width: 35%;
  left: 20%;
}

.class50_content h2 {
  color: white;
}

.shape1.flip {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  top: 0;
  width: 80%;
  z-index: 0;
  left: 0;
}
<section class="services pt-5">
  <div class="class50">
    <div class="svg-content">
      <div class="shape1 flip">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1083.06 1721.53">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #10a2bd;
                            }
                        </style>
                    </defs>
                    <path id="Shape_3_copy" data-name="Shape 3 copy" class="cls-1" d="M1082.36-4.17-.69,884.2l1083.06,833.16" transform="translate(0.69 4.17)"></path>
                </svg>
      </div>
      <div class="class50_content">
        <h2>Morbi vesti...</h2>
        <h3>Sed sagittis diam eu purus dictum</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed recusandae in sunt fugit eveniet ratione facere quis consequatur! Nihil quia obcaecati quam aspernatur odio labore vero doloribus cupiditate sed.</p>
        <a href="#" class="btn btn-2">Read More</a>
      </div>
    </div>
  </div>
  <div class="class50">
    <h2>Test 123</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nemo, harum tempore quasi quae, tempora eveniet officiis labore iste natus atque aliquam ab quia optio sequi voluptatibus molestiae architecto, quos.</p>
  </div>
</section>

1 Ответ

0 голосов
/ 02 мая 2018

Мне нужно держать область содержимого внутри треугольной формы.

Единственный способ выполнить это условие - использовать фиксированные размеры как для области содержимого, так и для формы, а также перемещать форму влево с той же скоростью, что и область содержимого.

Поскольку это означает, что в большинстве случаев форма будет шире, чем 50% области просмотра, содержимое правой половины будет перекрывать форму. Это конфликт целей. Если бы форма была ограничена 50% ширины, содержимое не поместилось бы внутри для маленьких экранов. 

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}

div {
  display: block
}

section.services {
  width: 100%;
}

.class50 {
  float: left;
  width: 50%
}

.svg-content {
  position: relative;
  margin-top: -10%;
}

.class50_content {
  position: absolute;
  top: 35%;
  width: 265px;
  left: 20%;
}

.class50_content h2 {
  color: white;
}

.shape1.flip {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  position: relative;
  top: 0;
  width: 550px;
  z-index: 0;
  left: calc(20% - 150px);
}
<section class="services pt-5">
  <div class="class50">
    <div class="svg-content">
      <div class="shape1 flip">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1083.06 1721.53">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #10a2bd;
                            }
                        </style>
                    </defs>
                    <path id="Shape_3_copy" data-name="Shape 3 copy" class="cls-1" d="M1082.36-4.17-.69,884.2l1083.06,833.16" transform="translate(0.69 4.17)"></path>
                </svg>
      </div>
      <div class="class50_content">
        <h2>Morbi vesti...</h2>
        <h3>Sed sagittis diam eu purus dictum</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed recusandae in sunt fugit eveniet ratione facere quis consequatur! Nihil quia obcaecati quam aspernatur odio labore vero doloribus cupiditate sed.</p>
        <a href="#" class="btn btn-2">Read More</a>
      </div>
    </div>
  </div>
  <div class="class50">
    <h2>Test 123</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nemo, harum tempore quasi quae, tempora eveniet officiis labore iste natus atque aliquam ab quia optio sequi voluptatibus molestiae architecto, quos.</p>
  </div>
</section>
...