Question

我正在尝试创建一个带有切角的按钮，唯一的挑战是使该角透明，而不是该角的背景颜色。

附加了我要实现的示例

.wrapper {
  padding:40px;
  width: 100%;
  height: 150px;
  background: #aaaaaa;
}
.btn-border-tilt {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    background-color: #07926D;
    padding: 16px 30px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.btn-border-tilt:after {
    content: "";
    width: 24px;
    height: 24px;
    background: #cccccc;
    position: absolute;
    right: -12px;
    bottom: -12px;
    transform: rotate(-132deg);
}

<div class="wrapper">
  <a href="#" class="btn-border-tilt">This is button</a>
</div>

Answer 1

我相信您要寻找的是修改按钮的背景-使用linear-gradient从透明颜色更改为特定颜色：

background: linear-gradient(315deg, transparent 15px, #07926D 0px);

在上下文中：

.wrapper {
  padding:40px;
  width: 100%;
  height: 150px;
  background: #aaaaaa;
}
.btn-border-tilt {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    padding: 16px 30px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    background: linear-gradient(315deg, transparent 15px, #07926D 0px);
}

<div class="wrapper">
  <a href="#" class="btn-border-tilt">This is button</a>
</div>

Answer 2

您可以做这样的事情，我很着急，因此，您可以根据需要进行任何更改。

.wrapper {
  padding:40px;
  width: 100%;
  height: 150px;
  background: #aaaaaa;
}
.btn-border-tilt {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    background-color: #07926D;
    padding: 16px 10px 16px 35px;
    position: relative;
    text-decoration: none;
}
.btn-border-tilt:after {
    content: "";
    width: 0;
    position: absolute;
    height: 0;
    border-style: solid;
    border-width: 26px 0px 20px 20px;
    border-color: transparent transparent transparent #07926D;
    right: -20px;
    top: 2px;
}

a.btn-border-tilt:before {
    content: "";
    width: 0;
    position: absolute;
    height: 0;
    border-style: solid;
    border-width: 0px 0 60px 30px;
    border-color: transparent transparent transparent #07926D;
    right: -4px;
    top: -15px;
    transform: rotate(90deg);
}

<div class="wrapper">
  <a href="#" class="btn-border-tilt">This is button</a>
</div>

Answer 3

使用after和before进行检查，并更改文本中心的填充

.wrapper {
  padding:40px;
  width: 100%;
  height: 150px;
  background: #aaaaaa;
}
.btn-border-tilt {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    background-color: #07926D;
    padding: 16px 12px 16px 30px;
    position: relative;
    text-decoration: none;
}
.btn-border-tilt:before {
    content: "";
    width: 18px;
    height: 30px;
    background: #07926D;
    position: absolute;
    right: -18px;
    top: 0px;
}
.btn-border-tilt:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
     width: 0;
      height: 0;
      border-top: 18px solid #07926D;
      border-right: 18px solid transparent;
    right: -18px;
    bottom: 0px;
}

<div class="wrapper">
  <a href="#" class="btn-border-tilt">This is button</a>
</div>

Answer 4

在底部创建一个三角形。

参考：CSS Tricks

.wrapper {
  padding:40px;
  width: 100%;
  height: 150px;
  background: #aaaaaa;
}
.btn-border-tilt {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    background-color: #07926D;
    padding: 16px 30px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.btn-border-tilt:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border: 12px solid #aaaaaa;
    border-left-color: transparent;
    border-top-color: transparent;
}

<div class="wrapper">
  <a href="#" class="btn-border-tilt">This is button</a>
</div>

创建带有切碎的透明角的按钮

4 个答案: