What is the best way to make a stylish curved content divider using CSS?

Question

What is the best way to make a stylish curved content divider using CSS?

Currently, I am in the process of developing a small web project and have come across an interesting detail that I would like to incorporate: a curved content divider. While most dividers are simply straight lines, this one has more of a unique shape. I have been considering different ways to implement it using CSS or possibly SVG, but I'm unsure of the best approach. Take a look at the image below for reference: The gray content on top aligns perfectly with the orange curve, while the white content underneath follows along the same curve. Is there a way to achieve this effect through CSS or SVG without relying on images?

Your assistance is greatly appreciated!

javascript html css svg

Answer 1

Answer №1

After working on CSS rounded corners, this is my best attempt so far... still improving!

.divider {
  width: 100%;
  height: 51vw;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.divider:after,
.divider:before,
.divider b:after,
.divider b:before {
  content: "";
  display: block;
  position: absolute;
}
.divider:after {  
  width: 63.7%;
  height: 62.5%;
  border-radius: 50% 50% 0 0/50%;
  bottom: -4px;
  left: -7.5%;
  border: red 2px solid;
  border-right: transparent 2px solid;
}
.divider:before {  
  width: 63.6%;
  height: 63.7%;
  border-radius: 0 0 50% 50%/50%;
  right: -7.5%;
  top: -4px;  
  background: #eee;
}
.divider b {
  display: block;
  width: 50%;
  height: 100%;
  background: #eee;
}
.divider b:after {
  width: 63.7%;
  height: 62.5%;
  border-radius: 0 0 50% 50%/50%;
  right: -7.5%;
  top: -4px;  
  border: red 2px solid;
  border-left: transparent 2px solid;
}
.divider b:before { 
  width: 63.6%;
  height: 63.7%;
  border-radius: 50% 50% 0 0/50%;
  bottom: -4px;
  left: -7.5%;
  background: #fff;
}

<div class="divider"><b></b></div>

Answer 2

After working on CSS rounded corners, this is my best attempt so far... still improving!

.divider {
  width: 100%;
  height: 51vw;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.divider:after,
.divider:before,
.divider b:after,
.divider b:before {
  content: "";
  display: block;
  position: absolute;
}
.divider:after {  
  width: 63.7%;
  height: 62.5%;
  border-radius: 50% 50% 0 0/50%;
  bottom: -4px;
  left: -7.5%;
  border: red 2px solid;
  border-right: transparent 2px solid;
}
.divider:before {  
  width: 63.6%;
  height: 63.7%;
  border-radius: 0 0 50% 50%/50%;
  right: -7.5%;
  top: -4px;  
  background: #eee;
}
.divider b {
  display: block;
  width: 50%;
  height: 100%;
  background: #eee;
}
.divider b:after {
  width: 63.7%;
  height: 62.5%;
  border-radius: 0 0 50% 50%/50%;
  right: -7.5%;
  top: -4px;  
  border: red 2px solid;
  border-left: transparent 2px solid;
}
.divider b:before { 
  width: 63.6%;
  height: 63.7%;
  border-radius: 50% 50% 0 0/50%;
  bottom: -4px;
  left: -7.5%;
  background: #fff;
}

<div class="divider"><b></b></div>

What is the best way to make a stylish curved content divider using CSS?

Answer №1

Similar questions

When using the each() function, the array shows a length of zero and does not

Utilizing jQuery/AJAX to transfer information to Morris.JS

Stop the Bootstrap accordion from collapsing when clicking on an internal anchor (href)

Locate the nearest date (using JavaScript)

What is causing this code to break when using ajax's `data` parameter?

IE having issues with border display

What is the best way to fill in and subsequently find matches using the 'parent' identifier?

Issues with the functionality of the asynchronous socket.io JavaScript callback are being experienced

Update the hidden input's value by the ZIP code entered

Generating intricate arrays from a given list

I'm having difficulty integrating boostrap with my react application due to issues with the css-loader

The code runs smoothly on Codepen, but encounters issues when executed through index.html

What is the best way to incorporate a random JSON section into a JSON structure?

How to retrieve and manipulate object properties in AngularJS after loading them from a service

Issue with custom directive - bi-directional binding not functioning as expected

Innovative approach for setting up ES6 Grunt configuration

Creating a web form with the ability to select multiple images using Javascript

Display every even number within the keys of objects that have values ending with an odd number

Guide to transferring text to clipboard using PHP and JS

"Obtaining a MEAN response after performing an HTTP GET