圓角左側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>