私はそれが画像上にあったような例を作成します(フルスクリーンで実行されたコードを実行します)。私はズームのウェブページを私は形の境界線を参照してくださいので、私は1つのオブジェクトの六角形を作成し、バックグラウンドで矩形を追加することができます。バックグラウンドで四角形の六角形を作成する方法は?
.arrow-left {
margin-top: 40px;
width: 0;
height: 0;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
border-right:80px solid white;
vertical-align: top;
}
.backwhite{
margin-top: 40px;
width: 50%;
height:320px;
background-color: #FFFFFF;
color:#000000;
vertical-align: top;
}
.arrow-left_yellow {
width: 0;
height: 0;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
border-right:80px solid #FFAA00;
float:right;
}
.arrow-right_yellow {
width: 0;
height: 0;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 100px solid #FFAA00;
}
.cube {
width: 250px;
height: 400px;
background-color: #FFAA00;
}
.backwhite, .arrow-left,.arrow-left_yellow ,.arrow-right_yellow,.cube{
display: inline-block;
}
.backwhite-text{
float:left;
width: 80%;
}
.backwhite-text >h1{
color:#000000;
text-align: center;
}
.backwhite-text>p{
color:#000000;
}
.trapezoid {
vertical-align: top;
margin: 40px 0px;
position: relative;
display: inline-block;
width: 20px;
height: 320px;
background-color: #FFAA00;
color: white;
font-size: 2rem;
}
.trapezoid::before {
content: "";
position: absolute;
top: -40px;
border-top: 40px solid transparent;
border-left: 0 px solid transparent;
border-right: 20px solid #FFAA00;
border-bottom: 111px solid #FFAA00;
}
.trapezoid::after {
content: "";
position: absolute;
bottom: -40px;
border-bottom: 40px solid transparent;
border-left: 0px solid transparent;
border-right: 20px solid #FFAA00;
border-top: 111px solid #FFAA00;
}
#single-project{
padding-top: 310px;
}
<div id="single-project">
<div class="arrow-left"></div><div class="backwhite"> <div class="backwhite-text"><h1>H1 H1 H1 H1</h1><p>TextText</p></div><div class="arrow-left_yellow"></div></div><div class="trapezoid"></div><div class="cube"></div><div class="arrow-right_yellow"></div>
</div>
ここにCSSで図形を作成する方法のガイドがあります:https://css-tricks.com/examples/ShapesOfCSS/ – Andrew
ありがとうございます。しかし、私は六角形の背景に白い矩形が必要ですZインデックス付き。以下に答えてください。 :) – GrofMonteCristo