css 如何实现从按钮倾斜的边框？

xn1cxnb4 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(172)

我想实现一个按钮，将有一个按钮后面的边界。我已经尝试了很多方法，但最接近的一个是使用Box Shadows代码看起来像这样：

.button-with-bg-outline-shadow a{
    box-shadow:
   12px 8px 0 0px #042036,
   14px 7px 0 0px var(--e-global-color-a29f98a ),
   14px 9px 0 0px var(--e-global-color-a29f98a ),
   10px 8px 0 0px var(--e-global-color-a29f98a );
   transition: all .3s linear;
}

但问题是当我有不同的背景时，我需要改变box-shadow属性中的颜色，因此我需要为每个按钮单独编写新的CSS。
演示：https://imgur.com/j9BChj4
我希望轮廓所覆盖的区域应该是透明的，这样我就可以在任何地方重复使用一个元素。

css

来源：https://stackoverflow.com/questions/76408179/how-can-i-achieve-a-border-tilted-from-the-button

2条答案

按热度按时间

zpjtge221#

通过继承其父元素的某些属性来创建伪元素。然后应用蒙版来剪切内部区域。

/* Only for example --> */ body { margin: 0; display: grid; place-items: center; min-height: 100vh; background: 0 0 / cover url('https://i.stack.imgur.com/tWGMC.jpg'); }

a {
  position: relative;
  display: grid;
  place-items: center;
  height: 100px; width: 550px;
  border-radius: 23px;
  font: bold 40px/1em sans-serif;
  text-decoration: none;
  color: #000;
  background-color: #ff0;
}
a::before {
  content: '';
  position: absolute;
  top: 23px; left: 23px; z-index: -1;
  height: inherit; width: inherit;
  border: 3px solid #0000;
  border-radius: inherit;
  background-color: inherit;
  --mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: var(--mask);
  mask-size: 100% 100%;
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
}

<a href="#">Book An Appotment</a>

赞(0）回复(0）举报 2023-06-07

jjjwad0x2#

使用:after + css变量+ currentColor。这是功能按钮🙃：

button {
  height: 48px;
  padding: 0 32px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  transition: transform .4s;
  font-weight: 700;
  will-change: transform;
}

button:before {
  content: '';
  position: absolute;
  inset: 8px -8px -8px 8px;
  border: solid 2px currentColor;
  border-radius: inherit;
  pointer-events: none;
  transition: transform .4s;
}

button:after {
  content:'';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  border-radius: inherit;
}

button span {
  color: var(--text-color, #fff);
  z-index: 1;
}

button:hover {
  transform: translate(2px, 2px);
}

button:hover:before {
  transform: translate(-2px, -2px);
}

button:active {
  transform: translate(4px, 4px);
}

button:active:before {
  transform: translate(-4px, -4px);
}

<button style="color: blue;">
  <span>Button Red</span>
</button>
<br>
<button style="color: lightblue; --text-color:black;">
  <span>Button Red</span>
</button>

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何实现从按钮倾斜的边框？

2条答案

相关问题

热门标签

最新问答