html – CSS底部边框外的背景

2019年7月2日 220次阅读

这里的第一个问题所以请善待！我正在设计一个网站,并且我被要求以正弦边框框架图片.到目前为止,我已经通过创建一个带有3个div的容器div来解决它：第一个用于向下弯曲,第二个用于直线(我考虑的是稍后将其移除的想法)而第三个用于向上弯曲弯曲.

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>

我真的想弄清楚如何将最后一段变成白色,因为它是通过围绕右下角创建的,所以白色背景必须在div之外.

我知道这可能是一个愚蠢的问题,但在这里！谢谢！

*编辑：对不起大家,这里是我正在尝试做的图像] 2

最佳答案 它需要对间距进行微调,但沿着这些线条会有什么变化？ (我使用黑/白背景来显示部分,但这些可以交换甚至透明.

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>
点赞