html - カスタムの仕方がわからないスケーラブルな背景付き

Answer 1

画像を使用したくない場合は、css と html だけでこれを実現できるはずです。css と html でこれを行う利点は、ブラウザーでのサイズ変更が改善され (新しいブラウザーでは画像のサイズ変更が改善されています)、読み込みに時間がかからないことです。

次の行に沿って何かを試すことができます。

CSS スタイルは次のとおりです。

#tabbox {
    position:absolute;
    width: 200px; 
    height: 200px; 
    background: black;
    border: 2px solid #C7ECFE;
    -webkit-box-shadow:-4px 6px 12px #C7ECFE; 
    -moz-box-shadow: -4px 6px  12px #C7ECFE; 
    box-shadow:-4px 6px  12px #C7ECFE; 
}
#tabbox:before {
    margin-top:-2px;
    margin-left:0px;
    height: 0;
    width: 143px;
    content:"";
    position: absolute; 
    border-bottom: 30px solid #C7ECFE;
   border-right: 60px solid black; 
}
#tabbox:after {
    position: absolute;
    top:0;
    height: 0;
    width: 142px;
    content:"";
    position: absolute; 
    border-bottom: 30px solid black;
    border-right: 60px solid transparent; 
}

そして、本体で id = "tabbox" で div を定義するだけです。これにより、次のようなものが得られます。

Answer 2

あなたはこれを行うことができます

1、ヘッダー用のdivを作る

2、高さ100％で左右のdivを作り、この画像を両側に繰り返します

それは次のようになります