Question

我需要在背景上放置一个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>

Answer 1

我需要将内容区域保持在三角形内部。

满足此条件的唯一方法是对内容区域和形状使用固定大小，并以与内容区域相同的速率向左移动形状。

因为这意味着大多数时候形状将比视口的50％宽，因此右半部分的内容将与形状重叠。这是一个目标冲突。如果形状被限制在宽度的50％，则内容不适合小屏幕尺寸。

idxs[0]

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);
}

在调整窗口大小时，如何将内容区域保留在SVG形状内部而不移动到形状外部

1 个答案: