CSSの背景外枠

ここに最初の質問がありますので親切にしてください！私はウェブサイトをデザインしています。私はサインのような境界線で絵をフレームするように求められてきました。これまでは3つのdivでコンテナdivを作成していました。最初のものは下向きの曲がり、もう1つはまっすぐです（私は後でそれを取り除くことを考えています）、3番目のものは上向きです曲げる。 Here's a screenshot of the current state だから、これは現在のコードです：それは右下の角を丸めて作成していますように私は本当に、最後のセグメントは、白い取得する方法を把握しようとしているCSSの背景外枠

.border { 
 
    overflow: hidden; 
 
    align-items: center; 
 
    height: auto; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.bord1 { 
 
    margin-top: 4vh; 
 
    height: 4vh; 
 
    flex: 1; 
 
    border-top: solid 5px; 
 
    border-color: #e4ae03 rgba(0, 0, 0, 0) transparent transparent; 
 
    border-radius: 100% 0 0 0; 
 
    z-index: 999; 
 
} 
 

 
.bord2 { 
 
    margin-top: 4vh; 
 
    flex: 1; 
 
    display: inline; 
 
    height: 4vh; 
 
    border-top: 5px solid #e4ae03; 
 
} 
 

 
.bord3 { 
 
    margin-top: -4vh; 
 
    flex: 1; 
 
    height: 4vh; 
 
    display: block; 
 
    border-bottom: 5px solid; 
 
    border-color: transparent transparent #e4ae03 transparent; 
 
    border-radius: 0 0 100% 0; 
 
}

<div class="border"> 
 
    <div class="bord1 top top-bord"></div> 
 
    <div class="bord2 top top-bord"></div> 
 
    <div class="bord3 bottom"></div> 
 
</div>

、白い背景はdivの外側になければなりません。

これは愚かな質問かもしれませんが、ここにあります！ありがとう！

*編集：申し訳ありませんが、誰もが、ここで私はをやろうとしているもののイメージがある] 2

出典

2017-03-28 Shindeor

@ankuragarwal：ここにあなたのコメントが来る： 'あなたは、あなたが期待していることについて、あなたの質問の最後の行を詳しく教えてください。私はあなたが最後のセグメントとして何を指しているのか理解できませんでした。実際に期待されているもののjpegを追加するかもしれません。 –

私は純粋なCSSでもこれに対する答えがあまりにも不安です。私は単にPNGでこれを行うことをお勧めしますが、私は右上と左下の境界線を行う方法を理解することはできません。 –

それは間隔の微調整を必要とするが、これらの線に沿って何かでしょうか？（私は、セクションを表示するために白/黒の背景を使用するが、これらは、スワップ、あるいは透明にすることができた。[OK]を

body{background-color:black;} 
 

 
.border{ 
 
    overflow: hidden; 
 
    align-items: center; 
 
    height: auto; 
 
    width: 100%; 
 
    display: flex; 
 
    background-color:white; 
 
} 
 
.bord1{ 
 
    margin-top: 4vh; 
 
    height: 4vh; 
 
    flex:1; 
 
    border-top: solid 5px; 
 
    border-color:#e4ae03 rgba(0,0,0,0) transparent transparent; 
 
    border-radius: 100% 0 0 0; 
 
    z-index: 999; 
 
    background-color:black; 
 
} 
 
.bord2 { 
 
    margin-top: 4vh; 
 
    flex: 1; 
 
    display: inline; 
 
    height: 4vh; 
 
    border-top: 5px solid #e4ae03; 
 
    background-color:black; 
 
} 
 
.bord3{ 
 
    border-bottom: 5px solid; 
 
    border-color: transparent transparent #e4ae03 transparent; 
 
    border-radius: 0 0 100% 0; 
 
    background-color:white; 
 
    height:4vh; 
 
} 
 
.bord3-layer{ 
 
    flex: 1; 
 
    height: 9vh; 
 
    display: block; 
 
    background-color:black; 
 
}

<!DOCTYPE html> 
 
<HTML> 
 
    <head> 
 
     <style> 
 
     </style> 
 
    </head> 
 
    <body> 
 
<div class="border"> 
 
    <div class="bord1 top top-bord"></div> 
 
    <div class="bord2 top top-bord"></div> 
 
    <div class="bord3-layer"> 
 
    <div class="bord3 bottom"></div> 
 
    </div> 
 
</div> 
 
    </body> 
 
</HTML>

出典

2017-03-28 18:18:59 LegendaryJLD

高さ/サイジングに問題がある場合： 'div {box-sizing：border-box;}'を使うと助けになるかもしれません。 – LegendaryJLD

これは本当に素晴らしい解決策です。残念ながら、ページの背景はグラデーション、私は黒を必要としない部分を回すことはできませんでした！しかし、ありがとう！ – Shindeor

最後に、この方法では私が探していたレイアウトを完成させることができました！誰かが興味がある場合に備えて、ここに私のソリューションを掲載します！どうもありがとうございます！ – Shindeor

、最終的に、私はシステムを使用して、レイアウトを修正することができました内側のdivタグの、ここで私はそれをどのように処理したかである：

.container { 
 
    line-height: 1.5rem; 
 
    margin-top: -5vh; 
 
    padding: 0px 0px 0px; 
 
    padding-top: 5vh; 
 
    padding-bottom: 0px; 
 
    z-index: 0; 
 
    color: #b3b5b3; 
 
    background: -webkit-linear-gradient(left, #1b2716, #000000 80%); 
 
    background: -o-linear-gradient(left, #1b2716, #000000 80%); 
 
    background: -moz-linear-gradient(left, #1b2716, #000000 80%); 
 
    background: linear-gradient(left, #1b2716, #000000 80%); 
 
    min-height: 75vh; 
 
} 
 
.top { 
 
    box-shadow: inset 0 6px 0 0px #243c51; 
 
} 
 

 
.bottom { 
 
    box-shadow: 0 6px 0 0px #243c51; 
 
} 
 
.border{ 
 
    overflow: hidden; 
 
    align-items: center; 
 
    height: auto; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.bord1{ 
 
    margin-top: 4vh; 
 
    height: 4vh; 
 
    flex:1; 
 
    border-top: solid 5px; 
 
    border-color:#e4ae03 rgba(0,0,0,0) transparent transparent; 
 
    border-radius: 100% 0 0 0; 
 
    z-index: 999; 
 
} 
 

 
.bord1-bot{ 
 
    background: white; 
 
} 
 

 
.bord2 { 
 
    margin-top: 4vh; 
 
    flex: 1; 
 
    display: inline; 
 
    height: 4vh; 
 
    border-top: 5px solid #e4ae03; 
 
} 
 

 
.bord2-bot { 
 
    background: white; 
 
    margin-bottom: 4vh; 
 
    flex: 1; 
 
    display: inline; 
 
    height: 4vh; 
 
    border-bottom: 5px solid #e4ae03; 
 
} 
 

 
.bord3{ 
 
    flex: 1; 
 
    height: 4vh; 
 
    display: block; 
 
    border-bottom: 5px solid; 
 
    border-color: transparent transparent #e4ae03 transparent; 
 
    border-radius: 0 0 100% 0; 
 
} 
 

 
.bord3-top { 
 
    margin-top: 0vh; 
 
    background: black; 
 
} 
 
.bord3-bot { 
 
    margin-top: 0vh; 
 
    background: white; 
 
} 
 
.bord3-bottom { 
 
    background: white; 
 
} 
 
.bord3-layer-top{ 
 
    flex:1; 
 
    height: 8.5vh; 
 
    display: block; 
 
    background-color: white; 
 
} 
 

 
.bord3-layer-bot{ 
 
    flex:1; 
 
    height: 8.5vh; 
 
    display: block; 
 
} 
 
.bord1-layer-top{ 
 
    flex:1; 
 
    height: 8.5vh; 
 
    display: block; 
 
    background-color: white; 
 
} 
 

 
.bot-bord { 
 
    background: -webkit-linear-gradient(left, #1b2716, #000000 240%); 
 
} 
 

 
.text-con { 
 
    padding: 2vw; 
 
    z-index: 2; 
 
} 
 
.image-within { 
 
    display: block; 
 
    background: yellow; 
 
    height: 200px; 
 
    z-index: 10; 
 
} 
 
.top-bord { 
 
    background: white; 
 
}

<div class="container"> 
 
<div class="border"> 
 
    <div class="bord1 top top-bord"></div> 
 
    <div class="bord2 top top-bord"></div> 
 
    <div class="bord3-layer-top"> 
 
    <div class="bord3 bottom bord3-top"></div> 
 
</div> 
 
</div> 
 
<div class="image-within"> 
 
</div> 
 
<div class="border"> 
 
    <div class="bord1-layer-top"><div class="bord1 top bot-bord"></div></div> 
 
    <div class="bord2-bot bottom"></div> 
 
    <div class="bord3-layer-bot"> 
 
    <div class="bord3 bottom bord3-bot"></div> 
 
</div> 
 
</div> 
 
</div>

CSSは現時点では本当に面倒ですので、ちょっと整理してすべてのアイテムを常に整列させておく必要がありますが、今のところよく見ています！ありがとうLegendaryJLD！

出典

2017-03-29 08:03:54 Shindeor

答えて

関連する問題