CSS 圆弧切角怎么做？

实现圆弧切角的 css 方案

想知道如何实现这种一边切角一边圆角的边框吗？别急，我们可以使用径向渐变来轻松实现。

步骤：

1. 使用 radial-gradient() 函数创建一个径向渐变。将颜色设置为透明和目标颜色，并调整中心点以创建切角。
2. 设置圆角半径以创建圆角部分。

示例代码：

<div class="cor">202201马勒卡</div>

.cor {
    line-height: 48px;
    padding: 0 20px 0 30px;
    background: radial-gradient(circle at -30px center, transparent 40px, orange 0);
    border-radius: 0 30px 30px 0;
    color: #fff;
}

自定义调整：

你可以微调代码中的中心点和渐变颜色，以便调整切角的形状和大小。

效果：

<div class="cor">202201马勒卡</div>
202201马勒卡马勒卡马勒卡

.cor {
    line-height: 48px;
    padding: 0 20px 0 30px;
    background: radial-gradient(circle at -30px center, transparent 40px, orange 0);
    border-radius: 0 30px 30px 0;
    color: #fff;
}

以上就是CSS 圆弧切角怎么做？的详细内容，更多请关注其它相关文章！