那些遇到过的问题

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

jam*_*pez 9 css css-shapes

有没有办法使用 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>
Run Code Online (Sandbox Code Playgroud)

我有 Mozilla Firefox 和 Google Chrome，但我在使用 Microsoft Edge 和 Internet Explorer 时遇到问题。

Vem*_*eme 6

实现这一目标的最佳途径，在我看来，就是用正确的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>
Run Code Online (Sandbox Code Playgroud)

在所有给定的浏览器（Chrome、Firefox、IE 11、Edge）中测试

Tem*_*fif 0

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

\n\n

\r\n
\r\n
*{\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  color: #555;\r\n  font-size: 1.1em;\r\n  background-color: #eee;\r\n  font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;\r\n}\r\n\r\n.container {\r\n  overflow: hidden;\r\n  width: 1200px;\r\n  margin: 50px auto;\r\n  background-color: white;\r\n}\r\n\r\n.element {\r\n  width: 800px;\r\n  height: 600px;\r\n  float: left;\r\n  background: \r\n    radial-gradient(circle at left, transparent 51.5%, red 52%),\r\n    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;\r\n  clip-path: circle(70% at 0% 50%);\r\n  -webkit-shape-outside: circle(70% at 0% 50%) border-box;\r\n  shape-outside: circle(70% at 0% 50%) border-box;\r\n  -webkit-shape-margin: 2em;\r\n  shape-margin: 2em;\r\n}\r\n\r\np,\r\nh1,\r\nh3 {\r\n  margin: 1em 0;\r\n}\r\n\r\np {\r\n  margin-right: 4em;\r\n}\r\n\r\nul {\r\n  list-style: circle;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="container">\r\n  <div class="element">  \r\n  </div>\r\n  <h1>Cupcakes Recipe</h1>\r\n  <p>\r\n    Cupcake ipsum dolor sit. Amet sweet roll sweet roll cheesecake sweet roll apple pie ice cream. Toffee souffl\xc3\xa9 danish souffl\xc3\xa9 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.\r\n  </p>\r\n  <h3>Ingredients</h3>\r\n  <ul>\r\n    <li>1/2 Lorem Ipsum</li>\r\n    <li>5g Sugar Ipsum</li>\r\n    <li>2 eggs</li>\r\n  </ul>\r\n  <p>\r\n    Dessert oat cake candy lollipop topping cotton candy jelly beans I love cake. Brownie sugar plum cotton candy wafer drag\xc3\xa9e pudding I love. I love I love chocolate. Topping danish carrot cake souffl\xc3\xa9 liquorice icing gummi bears liquorice dessert. Jujubes oat cake tootsie roll tart. \r\n  </p>\r\n  <p>\r\n    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\xc3\xa9 wafer biscuit.\r\n  </p>\r\n\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

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

\n\n

\r\n
\r\n
*{\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  color: #555;\r\n  font-size: 1.1em;\r\n  background-color: #eee;\r\n  font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;\r\n}\r\n\r\n.container {\r\n  overflow: hidden;\r\n  width: 1200px;\r\n  margin: 50px auto;\r\n  background-color: white;\r\n}\r\n\r\n.element {\r\n  width: 800px;\r\n  height: 600px;\r\n  float: left;\r\n  background: \r\n    radial-gradient(circle at 0 40% , transparent 51.5%, red 52%),\r\n    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;\r\n  clip-path: circle(70% at 0% 50%);\r\n  -webkit-shape-outside: circle(70% at 0% 50%) border-box;\r\n  shape-outside: circle(70% at 0% 50%) border-box;\r\n  -webkit-shape-margin: 2em;\r\n  shape-margin: 2em;\r\n}\r\n\r\np,\r\nh1,\r\nh3 {\r\n  margin: 1em 0;\r\n}\r\n\r\np {\r\n  margin-right: 4em;\r\n}\r\n\r\nul {\r\n  list-style: circle;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="container">\r\n  <div class="element">  \r\n  </div>\r\n  <h1>Cupcakes Recipe</h1>\r\n  <p>\r\n    Cupcake ipsum dolor sit. Amet sweet roll sweet roll cheesecake sweet roll apple pie ice cream. Toffee souffl\xc3\xa9 danish souffl\xc3\xa9 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.\r\n  </p>\r\n  <h3>Ingredients</h3>\r\n  <ul>\r\n    <li>1/2 Lorem Ipsum</li>\r\n    <li>5g Sugar Ipsum</li>\r\n    <li>2 eggs</li>\r\n  </ul>\r\n  <p>\r\n    Dessert oat cake candy lollipop topping cotton candy jelly beans I love cake. Brownie sugar plum cotton candy wafer drag\xc3\xa9e pudding I love. I love I love chocolate. Topping danish carrot cake souffl\xc3\xa9 liquorice icing gummi bears liquorice dessert. Jujubes oat cake tootsie roll tart. \r\n  </p>\r\n  <p>\r\n    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\xc3\xa9 wafer biscuit.\r\n  </p>\r\n\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

归档时间：

查看次数：

3087 次

最近记录：

5 年，11 月 前
相关归档
如何使用HTML/CSS/JavaScript开发桌面应用程序？ 187
如何制作没有内容的DIV有宽度？ 98
柔性框中的行换行不包装在Safari中 37
CSS特定表 30
使用CSS均匀分布元素 25
猫头鹰旋转木马2导航在边 21
如何加载CSS背景图像？事件被解雇了吗？ 20
在javascript中是否存在与gsub类似的内容？ 19
使用Bootstrap打印HTML表格背景颜色 17
如何将此形状作为菜单项的边框？ 3
难疑归档
JavaScript中使用"严格"做什么,背后的原因是什么？ 7339
C#中字符串和字符串有什么区别？ 6250
关闭/隐藏Android软键盘 3641
如何测试私有函数或具有私有方法,字段或内部类的类？ 2593
使用__init __()方法理解Python super() 2366
删除文件或文件夹 1910
PowerShell说"在这个系统上禁用了脚本的执行." 1545
使用Twitter Bootstrap 3将列居中 1109
如何向给定元素添加类？ 1109
功能编程是否取代了GoF设计模式？ 1028