如何使用SVG或CSS为DIV元素添加右下角圆角切割效果

要单独切割DIV的右下角，用CSS的border-bottom-right-radius属性就能精准实现，也可以用border-radius简写属性指定对应角的值。

方法1：单独设置右下角圆角 #

通过border-bottom-right-radius直接控制右下角的圆角样式，支持设置正圆或椭圆圆角：

<div class="custom-box"></div>

.custom-box {
  width: 200px;
  height: 150px;
  background-color: #4285F4;
  /* 正圆圆角：只写一个数值，水平和垂直半径一致 */
  border-bottom-right-radius: 50px;
  /* 椭圆圆角：第一个值是水平半径，第二个是垂直半径 */
  /* border-bottom-right-radius: 80px 40px; */
}

方法2：用简写属性批量设置 #

如果仅需要右下角有圆角，其他角保持直角，可通过border-radius简写属性按「左上、右上、右下、左下」的顺序赋值，不需要圆角的角设为0：

.custom-box {
  width: 200px;
  height: 150px;
  background-color: #4285F4;
  border-radius: 0 0 50px 0;
}

你可以根据实际需求调整圆角的数值，数值越大圆角弧度越明显；设置不同的水平/垂直半径就能得到椭圆型的圆角效果。

内容的提问来源于stack exchange，提问作者Aso