這是 HTML：我已將 ID 應用于兩個 div
<div id="herotext">
<div id="banner"></div>
<h1 id="maintitle">Hey, I'm Charlie</h1>
<p>This website contains basic HTML and CSS</p>
</div>
這是 CSS：我已經參考了兩個 div
#herotext {
position: absolute;
text-align : center;
}
#banner {
position: absolute;
width: 700px;
height: 350px;
transform: skew(20deg);
background: #555;
left: 50%;
margin-left: -15%;
}
uj5u.com熱心網友回復：
使用此代碼是靈活的代碼
.container{
padding: 100px;
}
.box {
position: relative;
margin: 100px;
min-width:400px;
}
.cover {
background: #555;
transform: skew(20deg);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index:-1;
}
.text {
padding:50px
}<div class="container">
<div class="box">
<div class="cover">
</div>
<div class="text">
<h1>Hey, I'm Charlie</h1>
<p>This website contains basic HTML and CSS</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
檢查此代碼的一種運行方式
.box {
position: relative;
padding: 50px;
}
.cover {
width: 400px;
height: 250px;
background: #555;
transform: skew(20deg);
}
.text {
transform: skew(-20deg);
padding: 50px;
}<div class="box">
<div class="cover">
<div class="text">
<h1>Hey, I'm Charlie</h1>
<p>This website contains basic HTML and CSS</p>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361307.html
上一篇：洗掉div中專案之間的空格