gpt4 book ai didi

html - 创建响应式倾斜 Angular div 背景

转载 作者:行者123 更新时间:2023-11-28 01:27:43 26 4
gpt4 key购买 nike

<分区>

我目前正在设计一个网站,我希望背景的顶部有一个倾斜的 Angular 。我原本打算使用 Jpeg,但意识到通过 CSS 会更有效率。所以我想出了一种方法来简单地通过以这种方式设置 div 的样式来建立倾斜:

-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg);

但是,我希望我的网站能够响应并且 div 是绝对禁止的。浏览器还强制两个 div 分开,留下白色背景。我可以增加两个 div 的高度,使它们相互重叠,但对我来说这一切似乎有点困惑和功能失调。我只是想知道是否有更简单的方法解决这个问题。下面是 HTML 和 CSS,如果你不理解我的话,还有一个片段。

body,
{
margin: 0;
padding: 0;
border: 0;
}
img {
margin: 0 auto;
text-align: center;
}
.row {
margin-top: 100px;
display: inline-block;
margin-bottom: 30px;
}
.row h2 {
font-family: sans-serif;
font-size: 2.5em;
font-weight: 400;
color: #212121;
}
h2 {
font-size: 1em;
}
.Second-Header {
color: black;
font-weight: 400;
font-family: 'Abril Fatface', cursive;
font-size: 3em;
margin: 80px;
}
.My-Gems {
width: 100%;
margin-top: -350px;
}
.global-container {
height: 2977px;
width: 100%;
position: relative;
background-color: #fff;
}
.content-container {
background-color: #fff;
text-align: center;
padding: 0px;
margin: 0px;
position: relative;
max-width: 1359px;
width: 100%;
}
.post-container {
background-color: gray;
z-index: 0;
text-align: center;
height: 50%;
top: 300px;
max-height: 100%;
padding: 0px;
margin: 0px;
position: relative;
width: 100%;
}
.Well-Aligned {
position: absolute;
left: 0;
top: 300px;
width: 100%;
height: 300px;
background-color: gray;
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg);
}
.Biographical-Content {
display: block;
top: -350px;
position: relative;
font-family: "Abril+Fatface", sans-serif;
width: 65%;
margin-left: auto;
text-align: center;
padding: 0px;
z-index: 99999;
margin-right: auto;
}
.Biographical-Content p {
margin-top: 10px;
color: #404040;
padding: 0px;
font-size: 20px;
line-height: 2em;
}
<div class="content-container">

<div class="row">
<h2>
Hello
<span></span>
</h2>
</div>

<div class="Well-Aligned"></div>
<div class="post-container">
<div class="Biographical-Content">
<div class="step out-view"></div>
<br>
<p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
<p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
<p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
<p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
</div>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com