Question

这里的第一个问题所以请善待！我正在设计一个网站，并且我被要求以正弦边框框架图片。到目前为止，我已经通过创建一个带有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

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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底部边框外的背景

2 个答案: