Question

是否可以使用HTML CSS添加底部曲线，因此我们不需要像这样裁剪图像？这样做的主要目的是让图像像这样自动弯曲，我试图添加border-radius但它不起作用。有什么帮助吗？

我认为我们需要使用SVG？我不确定。

Answer 1

根据您的browser support要求，您可以使用clip-path和circle。

.clip {
  display: inline-block;
  clip-path: circle(100% at 50% -50%);
}

<div class="clip">
  <img src="https://placehold.it/500x350" alt="">
</div>

circle(100% at 50% -50%)定义了一个圆，其半径为100%（容器的宽度），位于容器坐标系上的坐标x = 50% y = -50%处。调整这些参数以满足您的需求（取决于容器和图像的实际大小）。

Answer 2

您可以使用String和border-bottom-right-radius进行游戏：

＆＃13;

border-bottom-left-radius

＆＃13;

    img {
        border-bottom-right-radius: 30%;
        border-bottom-left-radius: 30%;
    }

＆＃13;

Answer 3

对Troyer's answer进行了一些改进，使其与使用border-radius属性的长度和百分比的示例更相似。

border-bottom-left-radius: [length] [percentage];

＆＃13;

img {
  border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 50% 25%;
}

＆＃13;

<img src="http://placehold.it/350x150">

＆＃13;

Answer 4

＆＃13;

body {
  background-color: #E4E4E4;
}
img {
  width: 100%;
  border-radius: 0 0 50% 50%;
}

＆＃13;

<img src="https://i.stack.imgur.com/e9A5S.jpg">

＆＃13;

Answer 5

您可以使用此代码：

 <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <style type="text/css">

      /*if you want to curve on top position*/

      #img{
        border-top-right-radius:50% 10%;
        border-top-left-radius:50% 10%;   
    }
    /*if you want to curve on bottom position*/
     /*   #img{    
        border-bottom-right-radius:50% 10%;
        border-bottom-left-radius:50% 10%
    }*/
      </style>
    </head>
    <body>
    <img src="https://i.stack.imgur.com/e9A5S.jpg" height="400" width="400" id="img">



    </body>
    </html>

Answer 6

嗯，你走了，希望这对你来说很好，也许你应该稍微改变％值。

＆＃13;

img {
  border-bottom-left-radius: 180% 90%;
  border-bottom-right-radius: 180% 90%;
}

＆＃13;

<img src="http://placehold.it/600x300">

＆＃13;

祝你好运!!

Answer 7

我知道这是旧帖子。希望这会有用。

＆＃13;

body{
	margin: 0;
	padding: 0;
}

.hero-main{
	  background: url("https://i.stack.imgur.com/e9A5S.jpg");
	  background-position: center;
	  background-size: cover;
	  background-repeat: no-repeat;
	  height: 350px;
	  width: 100%;
	  border-bottom-right-radius: 100% 75%;
  	  border-bottom-left-radius: 100% 75%;
  	 overflow:hidden;
}

＆＃13;

 <section class="hero-main">
          <div class="wrapper hero-inner text-center">
            <h1>Lorem ipsum</h1>
            <h2Lorem ipsum. 
            </h2>
           
          </div>
      </section>

＆＃13;

如何用图像背景从底部曲线div

7 个答案: