CSS 圆弧切角怎么做？

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《CSS 圆弧切角怎么做？》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

实现圆弧切角的 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>
<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;
}

以上就是《CSS 圆弧切角怎么做？》的详细内容，更多关于的资料请关注golang学习网公众号！