2016-08-11 6 views
-2

divで背景を作るにはどうすればいいですか?Imageは、片側から六角形のように見えます。
は、ここで私は正確に必要なものの例です:DemoDivideをその辺の1つから作成します

それから六角のような形状の例/デモのヘッダーだ下側

あなたは、いくつかのCSS形状を使用することができます

答えて

1

は、例えば、これを試してみてください。

#hexagon { 
 
\t width: 1000px; 
 
\t height: 550px; 
 
\t background:url(http://tresroyale.com/wp/wp-content/uploads/2013/08/1200x480.gif); 
 
\t position: relative; 
 
} 
 
#hexagon:after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t bottom:0px; 
 
\t left: 0; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 500px solid red; 
 
\t border-right: 500px solid red; 
 
\t border-top: 100px solid transparent; 
 
}
<div id="hexagon"></div>

+0

divには背景画像が含まれている必要があります。例をご覧ください – BBeta

+0

更新されたコード@BBetaを確認してください –

0

の六角形のクラス以下のセクションを与え、これらのスタイルを追加

.hexagon::before, .hexagon::after { 
    content: ""; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-bottom: 1670px solid #f7f5ed; 
    top: -1669px; 
    left: 50%; 
    z-index: -10; 
} 

.hexagon::before { 
    border-right: 10000px solid transparent; 
    -moz-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    -o-transform: translateX(-100%); 
    -webkit-transform: translateX(-100%); 
    transform: translateX(-100%); 
} 

.hexagon::after { 
    border-left: 10000px solid transparent; 
} 
関連する問題