How to add a vertical curve divider using HTML and CSS?

Question

Is there a way to copy the image design below using CSS shapes? I could not reproduce the curve between the image and the blue background.

I tried to use a border but that is not working:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
/** 
START HOME PAGE BANNER
**/
.home-header-main-container {
  overflow: hidden;
  max-width: 1440px;
  max-height: 529px;
  margin: 0px auto;
  background-color: #151F6D;
  display: flex;
  flex-direction: row-reverse;
}
.home-header-curve-border {
width: 739px;
max-width: 1440px;
background-color: #52B9C1;
max-height: 529px;
height: 529px;
clip-path: circle(650px at 760px 400px);
-webkit-clip-path: circle(650px at 760px 400px);
-webkit-shape-outside: circle(1307px at 1308px 400px) border-box;
shape-outside: circle(1307px at 1308px 400px) border-box;
-webkit-shape-margin: 24px;
}
.home-header-image {
  width: 740px;
  max-height: 529px;
  height: 529px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  clip-path: circle(650px at 817px 350px);
  -webkit-clip-path: circle(650px at 817px 350px);
  -webkit-shape-outside: circle(650px at 700px 350px ) border-box;
  shape-outside: circle(650px at 700px 350px) border-box;
  -webkit-shape-margin: 2em;
}

.home-header-main-container h1 {
font-size: 74px;
font-family: TTCommons Medium;
font-weight: 500;
line-height: 100%;
letter-spacing: -0.01em;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
margin-left: 120px;
}


@media only screen and (max-device-width: 1024px) {
 .home-header-main-container {
    max-height: 326px;
    margin: 0px auto;
  }

  .home-header-curve-border {
        width: 560px;
        height: 326px;
        clip-path: circle(360px at 380px 217px);
        -webkit-clip-path: circle(360px at 380px 217px);
        -webkit-shape-outside: circle(360px at 380px 217px) border-box;
        shape-outside: circle(360px at 380px 217px) border-box;
  }
  .home-header-image {
        width: 100%;
        height: 326px;
        clip-path: circle(360px at 415px 190px);
        -webkit-clip-path: circle(360px at 415px 190px);
        -webkit-shape-outside: circle(360px at 415px 190px) border-box;
        shape-outside: circle(360px at 415px 190px) border-box;
  }

  .home-header-main-container h1 {
      font-size: 40px;
      margin-left: 48px;
  }

}


@media only screen and (max-device-width: 768px) {

  .home-header-main-container {
max-height: 326px;
margin: 0px auto;
  }

  .home-header-curve-border {
  width: 1053px;
  height: 326px;
  clip-path: circle(360px at 380px 217px);
  -webkit-clip-path: circle(360px at 380px 217px);
  -webkit-shape-outside: circle(360px at 380px 217px) border-box;
  shape-outside: circle(360px at 380px 217px) border-box;
  }
  .home-header-image {
width: 100%;
height: 326px;
clip-path: circle(360px at 415px 190px);
-webkit-clip-path: circle(360px at 415px 190px);
-webkit-shape-outside: circle(360px at 415px 190px) border-box;
shape-outside: circle(360px at 415px 190px) border-box;
  }

  .home-header-main-container h1 {
  font-size: 40px;
  margin-left: 24px;
  }


}

@media only screen and (max-device-width: 425px) {

  .home-header-main-container {
flex-direction: column;
max-height: unset;
  }

  .home-header-curve-border {
  width: 100%;  
  -webkit-clip-path: none;
  -webkit-shape-outside: none;
  shape-outside: none;
  background-color: transparent;
  }
  .home-header-image {
    width: 100%;
    -webkit-clip-path: none;
    -webkit-shape-outside: none;
    shape-outside: none;
    background-size: cover;
    background-position: center;
  }

  .home-header-main-container h1 {
    margin-top: 40px;
    margin-left: 24px;
    margin-right: 24px;
  }

}

/** 
END HOME PAGE BANNER
**/
</style>
</head>
<body>

   

<div id="mobile-header">
		<img src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" >
		<h1>
			  Empowering people to enjoy healthier relationships				</h1>
	</div>
	<div id="desktop-header">
		<div class="home-header-main-container">
			<div class="home-header-curve-border">
				<div class="home-header-image" <?php echo $featured_image_as_bg; ?> role="img" area-label="<?php echo $featured_image_alt; ?>"></div>
			</div>
			<h1 class="elementor-heading-title elementor-size-default">
			  
			  Empowering people to enjoy healthier relationships				
			</h1>
			<div class="clear"></div>
		</div>
	</div>
</body>
</html>

I've got Mozilla Firefox and Google Chrome but I'm having a problem with Microsoft Edge and Internet Explorer.

I guess you need this so you can easily swap images within that right area dynamically (from an admin panel/CMS/etc). If you don't have a dynamic CSS theme that changes that blue color please read further. Otherwise, stop here :). If that's the case, and even more, if you want to work across all browsers, I'd slice the left image as a png, and use it as a mask for the one the right. The one the right would go beneath the left one. — Nicolae Olariu
– Nicolae Olariu, Commented Jan 2, 2020 at 7:33

Veme · Accepted Answer · 2020-01-08 11:25:59Z

6

+250

The best way to achieve this, in my opinion, is to use properly overflow: hidden, border-radius, width and height properties

<div class='container' style='position: relative; overflow: hidden; width: 200px; height: 300px; background-color: #161f6e;'>
  <div class='divider' style='position: absolute; left: 26px; top: -100px; width: 300px; height: 500px; border-radius: 100% 0 0 60%; background-color: #52b9c0;'></div>
  <div class='image' style='position: absolute; left: 60px; top: -100px; width: 300px; height: 500px; border-radius: 50% 0 0 50%; background-color: #000000;'></div>
</div>

Tested in all given browsers (Chrome, Firefox, IE 11, Edge)

edited Jan 8, 2020 at 11:25

answered Jan 8, 2020 at 11:17

Veme

3841 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AlexioVay · Accepted Answer · 2020-01-02 13:08:12Z

I have only used border-radius and some transform: rotate attributes to solve your issue, without using clip-pathat all to guarantee that more browsers will be supported, including MS IE and Edge.

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  color: #fff;
  background-color: #00008b;
}

.header {
  display: flex;
}

p {
  width: 400px;
  margin-left: 50px;
  margin-right: 80px;
  z-index: 1;
}

.img {
  position: relative;
  margin-top: -100px;
  background-image: url(https://images.unsplash.com/photo-1497486443155-158cceb6629a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  background-size: cover;
  background-position-x: 5px;
  background-repeat: no-repeat;
  width: 500px;
  height: 380px;
}

.img::before {
  transform: rotate(10deg);
  -ms-transform: rotate(10deg); /* IE 9 */
  -webkit-transform: rotate(10deg); /* Safari prior 9.0 */    
  content: "";
  position: absolute;
  top: -50px;
  left: -110px;
  width: 500px;
  height: 500px;
  display: block;
  border-left: 120px solid #00008b; 
  border-radius: 50%;
}

.shape {
  transform: rotate(372deg);
  -ms-transform: rotate(372deg); /* IE 9 */
  -webkit-transform: rotate(372deg); /* Safari prior 9.0 */  
  border-left: 25px solid #40e0d0;
  border-radius: 50%;
  position: absolute;
  left: 0;
  width: 240px;
  height: 400px;
}

.content {
  position: relative;
  padding-top: 10px;
  padding-left: 50px;
  font-size: 20px;
}

.content::before {
  content: "";
  width: 100%;
  height: 14px;
  background-color: #00008b;
  position: absolute;
  top: 0;
  z-index: 1;
  display: block;
}

<body>
  <div class="header">
    <p>Empowering people to enjoy healthier relationships</p>
    <div class="img">
      <div class="shape"></div>
    </div>
  </div>
  <div class="content">Main content here.</div>
</body>

I also have created a Codepen here.

This works on my MS Edge browser.

I hope this helps you?

@jameshwartlopez I have updated my answer just now, if you may have had a look earlier. I also added support for older IE versions and Safari.

timur · Accepted Answer · 2020-01-02 10:50:57Z

I'll assume that you've got your CSS sorted for other browsers and are looking for IE/Edge options.

Two options come to mind, but neither is ideal, so it would really depend on how far you want to take it

setting border-radius in your relevant classes works:

  border-top-left-radius: 100%;
  border-bottom-left-radius: 50%;

this comes close for perfect circular cutouts, but isn't as flexible as clip-path

According to MDN, specifying clip-path has no effect on HTML elements, but is supported on SVG elements. Then, given you are generating the page anyway, you could generate the border inside an inline-SVG instead

<div class="home-header-image">
    <svg>     
        <defs><!-- define your clipping path here -->
          <clipPath id="clipping-path">
            <circle cx="760" cy="400" r="650" style="stroke: #0000; fill: #000000;" />
          </clipPath>         
        </defs>
        <!-- order of elements matters here - latter gets drawn over former, so the image goes to the bottom -->
        <circle id="curve-border" cx="740" cy="400" r="700" style="stroke:#006600; fill:#00cc00"/><!-- colored border -->
        <image id="image" clip-path="url(#clipping-path)" width="750" height="500" xlink:href="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
    </svg>
</div>

This obviously will change the way you currently lay your page out, but it might give you the consistency you are seeking. Another advantage - you can draft the SVG in an editor of your choice and then use it as a starting point to programmatically generate the final look. Hopefully exploring that avenue yields some results.

Suraj-Ui · Accepted Answer · 2020-01-06 09:36:54Z

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  color: #fff;
  background-color: #00008b;
}

.header {
  display: flex;
}

p {
  width: 400px;
  margin-left: 50px;
  margin-right: 80px;
  z-index: 1;
}

.img {
  position: relative;
  margin-top: -100px;
  background-image: url(https://images.unsplash.com/photo-1497486443155-158cceb6629a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  background-size: cover;
  background-position-x: 5px;
  background-repeat: no-repeat;
  width: 500px;
  height: 380px;
}

.img::before {
  transform: rotate(10deg);
  -ms-transform: rotate(10deg); /* IE 9 */
  -webkit-transform: rotate(10deg); /* Safari prior 9.0 */    
  content: "";
  position: absolute;
  top: -50px;
  left: -110px;
  width: 500px;
  height: 500px;
  display: block;
  border-left: 120px solid #00008b; 
  border-radius: 50%;
}

.shape {
  transform: rotate(372deg);
  -ms-transform: rotate(372deg); /* IE 9 */
  -webkit-transform: rotate(372deg); /* Safari prior 9.0 */  
  border-left: 25px solid #40e0d0;
  border-radius: 50%;
  position: absolute;
  left: 0;
  width: 240px;
  height: 400px;
}

.content {
  position: relative;
  padding-top: 10px;
  padding-left: 50px;
  font-size: 20px;
}

.content::before {
  content: "";
  width: 100%;
  height: 14px;
  background-color: #00008b;
  position: absolute;
  top: 0;
  z-index: 1;
  display: block;
}

<body>
  <div class="header">
    <p>Empowering people to enjoy healthier relationships</p>
    <div class="img">
      <div class="shape"></div>
    </div>
  </div>
  <div class="content">Main content here.</div>
</body>

Vishnu S. · Accepted Answer · 2020-01-08 23:05:16Z

1

You can use img2css, which is a tool that allows you to convert an image to pure CSS. Take a screenshot of that portion or use an image editor such a Photoshop and alter the image in a way that you like it, upload the finished image onto the site, and you get pure CSS.

answered Jan 8, 2020 at 23:05

Vishnu S.

1611 gold badge2 silver badges8 bronze badges

Comments

Temani Afif · Accepted Answer · 2019-12-12 01:11:16Z

You can consider a radial background that follow the shape outside:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #555;
  font-size: 1.1em;
  background-color: #eee;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  overflow: hidden;
  width: 1200px;
  margin: 50px auto;
  background-color: white;
}

.element {
  width: 800px;
  height: 600px;
  float: left;
  background: 
    radial-gradient(circle at left, transparent 51.5%, red 52%),
    url(https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) -100px 0/cover;
  clip-path: circle(70% at 0% 50%);
  -webkit-shape-outside: circle(70% at 0% 50%) border-box;
  shape-outside: circle(70% at 0% 50%) border-box;
  -webkit-shape-margin: 2em;
  shape-margin: 2em;
}

p,
h1,
h3 {
  margin: 1em 0;
}

p {
  margin-right: 4em;
}

ul {
  list-style: circle;
}

<div class="container">
  <div class="element">  
  </div>
  <h1>Cupcakes Recipe</h1>
  <p>
    Cupcake ipsum dolor sit. Amet sweet roll sweet roll cheesecake sweet roll apple pie ice cream. Toffee soufflé danish soufflé I love I love dessert I love. Lollipop carrot cake marshmallow I love caramels. Chocolate cotton candy unerdwear.com dessert gingerbread gummies I love. Bonbon chupa chups biscuit danish apple pie. Bonbon muffin dessert wafer chocolate cake sesame snaps candy canes marzipan.
  </p>
  <h3>Ingredients</h3>
  <ul>
    <li>1/2 Lorem Ipsum</li>
    <li>5g Sugar Ipsum</li>
    <li>2 eggs</li>
  </ul>
  <p>
    Dessert oat cake candy lollipop topping cotton candy jelly beans I love cake. Brownie sugar plum cotton candy wafer dragée pudding I love. I love I love chocolate. Topping danish carrot cake soufflé liquorice icing gummi bears liquorice dessert. Jujubes oat cake tootsie roll tart. 
  </p>
  <p>
    Cookie lollipop cookie gingerbread danish muffin sweet chupa chups. Gingerbread donut muffin biscuit sesame snaps chocolate cake sweet. Sugar plum lemon drops pastry tiramisu chocolate gingerbread. I love pudding biscuit soufflé wafer biscuit.
  </p>

</div>

You can adjust the position to create something similar to the image you are showing:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #555;
  font-size: 1.1em;
  background-color: #eee;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  overflow: hidden;
  width: 1200px;
  margin: 50px auto;
  background-color: white;
}

.element {
  width: 800px;
  height: 600px;
  float: left;
  background: 
    radial-gradient(circle at 0 40% , transparent 51.5%, red 52%),
    url(https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) -100px 0/cover;
  clip-path: circle(70% at 0% 50%);
  -webkit-shape-outside: circle(70% at 0% 50%) border-box;
  shape-outside: circle(70% at 0% 50%) border-box;
  -webkit-shape-margin: 2em;
  shape-margin: 2em;
}

p,
h1,
h3 {
  margin: 1em 0;
}

p {
  margin-right: 4em;
}

ul {
  list-style: circle;
}

<div class="container">
  <div class="element">  
  </div>
  <h1>Cupcakes Recipe</h1>
  <p>
    Cupcake ipsum dolor sit. Amet sweet roll sweet roll cheesecake sweet roll apple pie ice cream. Toffee soufflé danish soufflé I love I love dessert I love. Lollipop carrot cake marshmallow I love caramels. Chocolate cotton candy unerdwear.com dessert gingerbread gummies I love. Bonbon chupa chups biscuit danish apple pie. Bonbon muffin dessert wafer chocolate cake sesame snaps candy canes marzipan.
  </p>
  <h3>Ingredients</h3>
  <ul>
    <li>1/2 Lorem Ipsum</li>
    <li>5g Sugar Ipsum</li>
    <li>2 eggs</li>
  </ul>
  <p>
    Dessert oat cake candy lollipop topping cotton candy jelly beans I love cake. Brownie sugar plum cotton candy wafer dragée pudding I love. I love I love chocolate. Topping danish carrot cake soufflé liquorice icing gummi bears liquorice dessert. Jujubes oat cake tootsie roll tart. 
  </p>
  <p>
    Cookie lollipop cookie gingerbread danish muffin sweet chupa chups. Gingerbread donut muffin biscuit sesame snaps chocolate cake sweet. Sugar plum lemon drops pastry tiramisu chocolate gingerbread. I love pudding biscuit soufflé wafer biscuit.
  </p>

</div>

There is a problem on this in microsoft edge that im still looking for answer.

Collectives™ on Stack Overflow

How to add a vertical curve divider using HTML and CSS?

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related