CSS 底部边框外的背景

Question

这里是第一个问题，请多多关照！我正在设计一个网站，有人要求我在正弦边框中构图。到目前为止，我已经通过创建一个容器 div 和 3 divs 来解决这个问题：第一个用于向下弯曲，第二个只是直线（我正在考虑稍后删除它的想法on) 第三个做向上弯曲。 Here's a screenshot of the current state 所以这是当前代码：

.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>

我真的想弄清楚如何让最后一段变白，因为它是通过右下角圆角创建的，所以白色背景必须是 "outside" div .

我知道这可能是一个愚蠢的问题，但就是这样！谢谢！

*编辑：对不起大家，这是我正在尝试做的事情的图片]2

Answer 1

它需要对间距进行微调，但是沿着这些方向的东西？（我使用 black/white 背景来显示这些部分，但这些可以交换甚至透明。

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>

Answer 2

好的，最后我能够使用内部 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！

CSS 底部边框外的背景

Background outside CSS Bottom Border

html

css

border