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

KenOscar
  • 866
山东

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

回复
阅读 1.4k
5 个回答
✓ 已被采纳

可以用径向渐变来实现

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

可以径向微调,效果如下

image.png

Fractal
  • 4.5k

<!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>

用svg画下不就好了吗

如果不是背景透明,可以用左边遮挡,clip右边不知道行不行

宣传栏