有没有办法使用CSS形状复制下面的图像设计？我无法重现图像和蓝色背景之间的曲线。
我尝试使用边框，但是不起作用:
<!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>我有Mozilla Firefox和Google Chrome，但是Microsoft Edge和Internet Explorer出现了问题。
最佳答案
我认为，实现此目标的最佳方法是正确使用overflow: hidden，border-radius，width和height属性
<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>在所有给定的浏览器(Chrome，Firefox，IE 11，Edge)中经过测试
关于css - 如何使用HTML和CSS添加垂直曲线分隔线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59296269/