Question

是否可以复制下面的图像设计，但不使用完整图像？我开始使用形状，但是无法复制图像和蓝色背景之间的曲线。

以下是我到目前为止所做的。我尝试使用边框，但是边框不起作用。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
	* {
  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-image: url(https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
  background-size: cover;
  background-position: -100px 0;
  -webkit-clip-path: circle(70% at 0% 50%);
  -webkit-shape-outside: circle(70% at 0% 50%) border-box;
  -webkit-shape-margin: 2em;
  /*shape-outside: circle(70% at 0% 50%) border-box;*/
  /*shape-outside: url(https://staging-betterplacesite.kinsta.cloud/wp-content/uploads/2019/10/image.png);*/
  border: 10px solid red;
  shape-margin: 2em;
}

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

p {
  margin-right: 4em;
}

ul {
  list-style: circle;
}
</style>
</head>
<body>

<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>
</body>
</html>

Answer 1

我认为，实现此目标的最佳方法是正确使用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）中经过测试

Answer 2

我仅使用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 here。

这在我的MS Edge浏览器上有效。

希望对您有帮助吗？

Answer 3

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

Answer 4

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

Answer 5

您可以考虑遵循外部形状的放射状背景：

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

使用html，css添加垂直曲线分隔线

5 个答案: