圆角左侧CSS

Question

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

任何帮助将不胜感激。

Answer 1

只能在左侧的两个角落使用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>

Answer 2

这应该是作为应用边界半径，以图像的一侧，用价值观和图像尺寸打得到你需要的效果一样简单：

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

Answer 3

您可以通过使用border radius创建图像上的曲线：

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