css - 如何在调整窗口大小时将内容区域保持在 SVG 形状内而不移动到形状外
问题描述
我需要在背景上放置一个 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>
解决方案
我需要将内容区域保持在三角形内。
满足此条件的唯一方法是对内容区域和形状使用固定大小,并以与内容区域相同的速率向左移动形状。
由于这意味着形状在大多数情况下将比视口的 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>
推荐阅读
- javascript - 推荐部分在我的网站上不起作用
- javascript - 将最后一个参数传递给函数 - JavaScript
- next.js - 在 Axios 拦截器下捕获 400 和 500 用于哨兵
- puppeteer - Crawlera & Puppeteer - HTTPS 中的身份验证问题
- python - 自动运行 python-pygame 脚本不输出声音
- amazon - 通过亚马逊 ASIN 获取 EAN
- loops - awk 语法 '||' 没有'if' - 它是如何工作的,为什么它会循环?
- android - 如何在活动旋转时保存/恢复 MotionLayout 的状态
- c - 我的代码“忽略”多个正确的显示并选择它捕获的第一个
- c# - 使用回调调用本机代码时出现 System.EngineExecutionException