CSS边界角落向后弯曲

Question

如何仅使用html和css制作下面的图像

Answer 1

您可以使用:after:pseudo-element with single div.

body {
  background: #88FF55;
}
div {
  position: relative;
  width: 150px;
  height: 100px;
  background: #01CC00;
}
div:after {
  content: 'i';
  color: #01CC00;
  position: absolute;
  font-size: 20px;
  bottom: 0;
  right: 0;
  width: 30px;
  font-weight: bold;
  height: 30px;
  text-align: right;
  line-height: 44px;
  border-top-left-radius: 100%;
  background: white;
}

<div></div>

你可以使用radial-gradient透明切割.

body {
  background: #88FF55;
}
div {
  width: 150px;
  height: 100px;
  line-height: 188px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #01CC00;
  background: -webkit-radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
  background: -moz-radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
  background: radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
}

<div>i</div>

或者你可以使用svg's clipPath.

body {
  background: #88FF55;
}
div {
  height: 100px;
  background: #01CC00;
}

<svg width="150" height="100" viewBox="0 0 150 100">
  <clipPath id="shape">
    <path d="M2,2 L146,2 L146,76 A20,20 1,0 0 126,98 L2,98z" />
  </clipPath>
  <foreignObject clip-path="url(#shape)" width="150" height="100">
    <div></div>
  </foreignObject>
  <text x="140" y="97" font-weight="bold" font-size="16" fill="#01CC00">i</text>
</svg>