-2
divで背景を作るにはどうすればいいですか?Imageは、片側から六角形のように見えます。
は、ここで私は正確に必要なものの例です:DemoDivideをその辺の1つから作成します
それから六角のような形状の例/デモのヘッダーだ下側
あなたは、いくつかのCSS形状を使用することができますdivで背景を作るにはどうすればいいですか?Imageは、片側から六角形のように見えます。
は、ここで私は正確に必要なものの例です:DemoDivideをその辺の1つから作成します
それから六角のような形状の例/デモのヘッダーだ下側
あなたは、いくつかのCSS形状を使用することができますは、例えば、これを試してみてください。
#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>
の六角形のクラス以下のセクションを与え、これらのスタイルを追加
.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;
}
divには背景画像が含まれている必要があります。例をご覧ください – BBeta
更新されたコード@BBetaを確認してください –