css - 如何使用 HTML 和 CSS 添加垂直曲线分隔线？

Question

有没有办法使用 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 时遇到了问题。

score 6 · Accepted Answer

在我看来，实现这一目标的最佳方法是正确使用overflow: hidden,border-radius和属性widthheight

<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）中测试

score 3 · Accepted Answer

我只使用border-radius了和一些transform: rotate属性来解决你的问题，clip-path根本没有使用来保证会支持更多的浏览器，包括 MS IE 和 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>

我还在这里创建了一个 Codepen 。

这适用于我的 MS Edge 浏览器。

我希望这可以帮助你？

score 1 · Accepted Answer

您可以使用img2css，这是一个允许您将图像转换为纯 CSS 的工具。截取该部分的屏幕截图或使用图像编辑器（如 Photoshop）并以您喜欢的方式更改图像，将完成的图像上传到网站上，然后您将获得纯 CSS。

score 1 · Accepted Answer

@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>

score 1 · Accepted Answer

我假设您已经为其他浏览器排序了 CSS，并且正在寻找 IE/Edge 选项。

想到了两个选择，但都不是理想的，所以这真的取决于你想走多远

border-radius在您的相关课程中设置有效：

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

这接近完美的圆形切口，但不如灵活clip-path

根据 MDN，指定clip-path对 HTML 元素没有影响，但在 SVG 元素上受支持。然后，假设您无论如何都要生成页面，您可以在 inline-SVG 内生成边框

<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>

这显然会改变您当前布局页面的方式，但它可能会给您带来您所寻求的一致性。另一个优势 - 您可以在您选择的编辑器中起草 SVG，然后将其用作以编程方式生成最终外观的起点。希望探索这条途径会产生一些结果。

score 0 · Accepted Answer

您可以考虑遵循外部形状的径向背景：

*{
  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>

您可以调整位置以创建类似于您显示的图像的内容：

*{
  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>

css - 如何使用 HTML 和 CSS 添加垂直曲线分隔线？

6 回答 6

Related

Reference