2016-11-17 15 views
0

私はそれが画像上にあったような例を作成します(フルスクリーンで実行されたコードを実行します)。私はズームのウェブページを私は形の境界線を参照してくださいので、私は1つのオブジェクトの六角形を作成し、バックグラウンドで矩形を追加することができます。バックグラウンドで四角形の六角形を作成する方法は?

アドバイスをいただきありがとうございます。 例 enter image description here

.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>

+0

ここにCSSで図形を作成する方法のガイドがあります:https://css-tricks.com/examples/ShapesOfCSS/ – Andrew

+0

ありがとうございます。しかし、私は六角形の背景に白い矩形が必要ですZインデックス付き。以下に答えてください。 :) – GrofMonteCristo

答えて

0

はい。六角形のオブジェクトを作成し、背景に長方形を追加することができます。 z-indexプロパティを使用します。この記事をチェックしてください:https://css-tricks.com/almanac/properties/z/z-index/

+0

偉大な、私はそれをやった。見た目と画像の使い方がはるかに優れています。ありがとう – GrofMonteCristo

+1

これは疑問に答えるかもしれませんが、リンクだけでなく実際の情報をここに提供するほうがよいでしょう。 [リンクのみの回答は良い回答とはみなされず、おそらく削除されます](http://stackoverflow.com/help/deleted-answers)。 –

関連する問題