Make a vertical border wavy-CodePudding

I am trying to find a way to insert a curved (or even better a wavy) vertical bar. I have found a

I want that border between the two columns to be "wavy". How can I accomplish this with only CSS?

CodePudding user response：

is this what you want?

if so here the code for it.

.has-wavy {
  --w: 10%;                           /* we will use a css var so we don't repeat code */
  position: relative;
}

.has-wavy::after {
  content: "";
  height: 100%;                       
  width: var(--w);                    /* the width is getted from css var */
  border-radius: 0 100% 100% 0;       /* rounding code is very simple like this, just one line */
  position: absolute;                 
  right: calc(-0.5 * var(--w));       /* the rounded part it will be shown out of the element */
  z-index: -1;                        /* half part isn't used, so we hide it use z-index */
  background-color: inherit;          /* get the element color that it is used dinamically */
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
}

body * {
  display: flex;
  flex: 1;
  justify-content: center;
}

<aside 
  style="background: #333; color: white" 
  >
    Side bar navigation menu here
</aside>

<main>Main content here</main>

CodePudding user response：

Do you mean something like this? Just adjust which corners, and the radius values, and the position/width/height values.

.bubble::after {
  content: '';
  border-top-right-radius: 80% 50%;
  border-bottom-right-radius: 80% 50%;
  position: absolute;
  top: 0;
  z-index: -1;
  width: 15%;
  background-color: #0f0f10;
  height: 85%;
}

<section >

</section>

CodePudding user response：

I myself have used clip-path for creating wavy borders like this. I got the clip-path from this clip-path generator

Explaination of my method

Using the tool I listed above, you can change every aspect of the waves, the depth and the height etc. All waves I have found online are as you said horizontally, but you can simply solve that by adding a transform: rotate(90deg) in there, which makes it vertical! If you want to add a wave that waves towards the right, you simply rotate it by -90 degrees.

On an extra note, make sure the :before's width and height are a square, so it aligns perfectly with the column it is fitted on, the width and height of the before have to be the height of the column you are trying to attach it to, to make it blend perfectly.

.bubble {
  display: flex;
}

.column-2::before {
  content: '';
  transform: rotate(90deg);
clip-path: polygon(100% 0%, 0% 0% , 0% 57.50%, 1% 57.49%, 2% 57.47%, 3% 57.42%, 4% 57.36%, 5% 57.29%, 6% 57.20%, 7% 57.09%, 8% 56.96%, 9% 56.82%, 10% 56.67%, 11% 56.49%, 12% 56.31%, 13% 56.11%, 14% 55.89%, 15% 55.67%, 16% 55.43%, 17% 55.17%, 18% 54.91%, 19% 54.63%, 20% 54.35%, 21% 54.05%, 22% 53.75%, 23% 53.43%, 24% 53.11%, 25% 52.78%, 26% 52.45%, 27% 52.11%, 28% 51.76%, 29% 51.42%, 30% 51.06%, 31% 50.71%, 32% 50.35%, 33% 50.00%, 34% 49.64%, 35% 49.28%, 36% 48.93%, 37% 48.58%, 38% 48.23%, 39% 47.88%, 40% 47.54%, 41% 47.21%, 42% 46.88%, 43% 46.56%, 44% 46.24%, 45% 45.94%, 46% 45.64%, 47% 45.36%, 48% 45.08%, 49% 44.82%, 50% 44.57%, 51% 44.33%, 52% 44.10%, 53% 43.89%, 54% 43.69%, 55% 43.50%, 56% 43.33%, 57% 43.17%, 58% 43.03%, 59% 42.91%, 60% 42.80%, 61% 42.71%, 62% 42.63%, 63% 42.58%, 64% 42.53%, 65% 42.51%, 66% 42.50%, 67% 42.51%, 68% 42.53%, 69% 42.58%, 70% 42.64%, 71% 42.71%, 72% 42.81%, 73% 42.92%, 74% 43.04%, 75% 43.18%, 76% 43.34%, 77% 43.51%, 78% 43.70%, 79% 43.90%, 80% 44.11%, 81% 44.34%, 82% 44.58%, 83% 44.83%, 84% 45.10%, 85% 45.37%, 86% 45.66%, 87% 45.96%, 88% 46.26%, 89% 46.57%, 90% 46.90%, 91% 47.22%, 92% 47.56%, 93% 47.90%, 94% 48.24%, 95% 48.59%, 96% 48.95%, 97% 49.30%, 98% 49.66%, 99% 50.01%, 100% 50.37%);
  position: absolute;
  left: -325px;
  top: 0;
  z-index: -1;
  width: 500px;
  background-color: firebrick;
  height: 500px
}

.column-1,
.column-2 {
  width: 50%;
  height: 500px;
}

.column-2 {
  background-color: firebrick;
  position: relative;
}

<section >
  <div >
    <h1>Column 1</h1>
  </div>
  <div >
    <h1>Column 2</h1>
  </div>
</section>

Hope this is something you were looking for, and that it is helpful!

CodePudding user response：

You can use border-radius instead of border-top-left/right-radius. If I understand you right, what you want is something like that:

.bubble::after {
  content: '';
   border-radius: 0px 120px 120px 0px;
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 10%;
  background-color: #0f0f10;
  height: 100%;
}

<section >

</section>

Hope thats helpfull.