【css】如何实现圆弧形状的切角？

KenOscar

1k30294483

发布于
2022-07-20 山东

更新于
2022-08-04

这种边框切角要怎么实现一边是切角一边是圆角

css3 css

阅读 4.5k

5 个回答

得票最新

XboxYan

18.1k63789

发布于
2022-07-20

✓ 已被采纳

可以用径向渐变来实现

<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;
}

可以径向微调，效果如下

Fractal

5.5k22331

发布于
2022-07-21

更新于
2022-07-21

<!DOCTYPE html>
<html>
<head>
  <style>
  .tag {position:relative;display: inline-block;}
  .tag .label {position:relative;line-height: 2em;background-color: #FDAC34;color: #FFF;border-radius: 1em;padding: 0 2em 0 3em;font-weight: bold;mask-image: radial-gradient(transparent 0,transparent 1.25em, black 1.25em ,black);mask-size: 100em 100em;mask-repeat: no-repeat;mask-position: -48.75em center;}
  .tag .icon {position:absolute;display:absolute;width:2em;height:2em;left:0;top:0;border-radius:50%;background-color:#FDAC34;}
</style>
</head>
<body>
  <div class="tag">
    <div class="label">202201马勒卡</div>
    <div class="icon"></div>
  </div>
</body>
</html>