CSS底部邊界外的背景

這裏的第一個問題，所以請善待！我正在設計一個網站，並且我被要求用正弦邊框框架圖片。到目前爲止，我已經通過創建一個帶有3個div的容器div來解決這個問題：第一個是向下彎曲，第二個是直線的（我正在考慮稍後將其移除的想法），第三個向上彎曲。 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來做這件事，但我不知道如何做右上和左下邊框。 –

那就需要沿着這些線路小幅調整空間，但一些圖像？（I使用黑/白背景顯示區段，但這些可能被交換或甚至透明的。

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

CSS底部邊界外的背景

回答

相關問題