如何使用 CSS 实现一边切角一边圆角的边框效果？

css 实现圆弧形状的切角

如何使用 css 实现一边切角，另一边圆角的边框效果呢？

解决方案：

可以使用径向渐变来实现此效果。

代码示例：

<div class="cor">202201马勒卡</div>
<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;
}

微调渐变：

您可以微调径向渐变的位置以获得所需的切角效果。例如，将 circle at -30px center 调整为 circle at -0px center，则切角将在元素的另一侧。

效果预览：

[图片演示效果](https://segmentfault.com/img/bvc1ekt)

以上就是如何使用 CSS 实现一边切角一边圆角的边框效果？的详细内容，更多请关注其它相关文章！