圆形左侧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

这应该就像将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">

Answer 3

您可以使用border radius：

在图片上创建曲线

<asp:CheckBox ID="chkActive" ng-model="chkActive" ng-init="chkActive='true'" runat="server" Text="Active" ng-checked="chkActive" ng-click="clCheck()" />

$scope.clCheck = function(){
   var _master.chkActive = $scope.chkActive 
}

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

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