背景CSS底部边框外部分

Question

背景CSS底部边框外部分

4

这是我的第一个问题，请多包涵！我正在设计一个网站，被要求在图片周围加上正弦波形的边框。到目前为止，我已经通过创建一个容器div和3个子div来实现：第一个用于向下弯曲，第二个是直的（我考虑以后删除它），第三个用于向上弯曲。这里是当前状态的截图以下是当前的代码：

.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

- Shindeor

@ankuragarwal：这里是你的评论：“您能否详细说明您问题的最后一行，您期望的是什么。我无法理解您所指的最后一段是什么。也许可以添加一个实际期望内容的JPEG图像。” - G-Cyrillus

我非常期待在纯CSS中得到这个答案。我只能建议通过png来完成，但我无法弄清楚如何做出右上角和左下角的边框。 - Leon Freire

2个回答

1

好的，最终我使用一组内部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！

- Shindeor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LegendaryJLD · Accepted Answer

需要进行轻微的间距调整，但是大致就是这个样子吗？（我使用黑色/白色背景来显示不同部分，但这些可以交换或甚至设置为透明。）

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>