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

文章不知道大家是否熟悉？今天我将给大家介绍《如何使用 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 实现一边切角一边圆角的边框效果？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！