如何使用剪切边缘创建按钮＆amp;圆角？

Question

根据设计，我正在尝试创建一个按钮，但是在圆角方面遇到了一些麻烦。

因此，我需要实现一个按钮，看起来像这样： 按钮视图

我试图通过Linearear-Gradient < /代码>，这种方式

.button {
  width: 210px;
  height: 45px;
  outline: none;
  border: 1px solid #389F96;
  background: 
  linear-gradient(-45deg, black, black, 30px, transparent 0px),
  linear-gradient(135deg, black, black, 30px, transparent 0px),
  linear-gradient(to bottom, #389F96, #46C1EE);
}

<button class="button">Log in</button>

但是在这种情况下，border-radius使我以不正确的方式将其围成一圈，

因此我需要创建一个这样的按钮（带有圆角，切割的边缘，带有线性梯度边框）。

是否有一些“简单的方法”来处理它？

Answer 1

如果按钮的尺寸始终相同（正如您的CSS所建议的那样），我会考虑使用SVG作为背景。

---

使用伪元转换

我能够实现的最相似的结果是基于 Temani Afif的评论 ：

button {
  border: 0;
  padding: 1rem 6rem;
  position: relative;
  background: transparent;
  color: white;
  display: block;
  margin: 0 auto;
  font-weight: bold;
}

button:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px 8px;
  transform: skewX(-30deg);
  background-image: linear-gradient(to bottom, #389F96, #46C1EE);
  z-index: -1;
}

<button>Log in!</button>

---

带有SVG过滤器的剪辑 -

基于 克隆评论 and nofollow noreferrer“> temani afif” /a>我实现了这一点：

button {
  color: white;
  font-weight: bold;
  border: 0;
  background: transparent;
  margin: 8px auto;
  display: block;
  filter:url(#round);
}

button > span {
  display: block;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
  background: linear-gradient(to bottom, #389F96, #46C1EE);
  padding: 1rem 6rem;
}

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="round">
            <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

<button>
  <span>
    Log in!
  </span>
</button>

---

我根据您的评论提供了解决方案，因为您没有提供任何答案。如果您将其添加为答案，我将删除我的。