All geek questions in one place

Background Outside CSS Bottom Border

first question is here so be kind! I am designing a website and I was asked to photograph the images at sinusoidal boundaries. So far, I have been communicating with him, creating a container div with 3 divs: the first for a downward bend, the second just straight (I will consider the idea of ​​removing it later), and the third up bend. Here is a screenshot of the current state. So this is the current code:

.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>
Run codeHide result

I am really trying to figure out how to get the last segment of white because it is created by rounding the lower right corner, so the white background should be “outside” the div.

I know this might be a dumb question, but here it is! Thank!

* Edit: Sorry, that’s the image of what I'm trying to do ! [] 2

+4
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>
Hide result
+1

, divs, :

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

CSS , , , ! LegendaryJLD!

+1

Source: https://habr.com/ru/post/1673433/

More articles:


All Articles