圆角左侧CSS

Question

我目前正在尝试使用CSS实现以下效果，但不幸的是，我修改代码的努力都未能使其正确。

非常感谢您的帮助。

- JMKelley

---

你能分享一下HTML和CSS代码吗？还有你尝试过的任何东西吗？ - Mihai T

你尝试使用过border-radius吗？ - shubham khandelwal

Answer 1

您可以在两个左侧角上使用border-radius，并将每个值组合成两个值，就像这个例子一样（您需要尝试找到一个好的组合）：

您只能在两个左侧角上使用border-radius，并且需要将每个值组合成两个值，就像这个例子一样（您需要尝试一下才能找到一个好的组合）：

.outer {
  width: 500px;
  background-color: #ddd;
  overflow: auto;
}
.outer img {
  float: right;
  border-top-left-radius: 30px 50%;
  border-bottom-left-radius: 30px 50%;
}

<div class="outer">
  <img src="http://placehold.it/200x400/fb3">
</div>

- Johannes

Answer 2

这应该很简单，只需在图像的一个侧面应用border-radius，调整值和图像大小以获得所需的效果：

img {border-radius: 250px 0px 0px 250px; }

<img src="http://placehold.it/300x500">

更复杂的曲线

此外，您可以涉足更复杂的曲线，例如：

img {
  border-top-left-radius: 100px 200px;
  border-bottom-left-radius: 100px 200px;
}

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

- mayersdesign

Answer 3

你可以使用边框半径在你的图片上创建一条曲线：

.container {
  display: inline-block;
  background-color: #cccccc;
  padding-left:20px;
}

.container img {
   border-radius: 75% 0 0 75%;
   display:block;
}

<div class="container">
    <img src="http://lorempixel.com/300/800/sports/1/">
</div>

- Pete