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