Menu
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.
902
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)
160
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?
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
