Question

我在按钮中使用伪元素来实现带角度的边框。但是在某些浏览器和某些缩放级别中，如果仔细观察，您会在伪元素的左侧边缘的按钮右侧看到伪元素周围的模糊轮廓。

.button {
  position: relative;
  padding: 0 20px;
  height: 53px;
  background-color: red;
  border: 4px solid black;
  border-right-width: 0;
  color: white;
  font-weight: 900;
  font-size: 14px;
  transition: all .425s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  z-index: 1;
  filter: blur(0);
}

.button::after {
  position: absolute;
  content: '';
  right: -19px;
  top: -4px;
  height: 53px;
  width: 38px;
  background-color: red;
  border: 4px solid black;
  z-index: -1;
  border-left: 0;
  transform: skew(-31deg);
  transition: all .425s ease;
  backface-visibility: hidden;
}

<a href="#" class="button">Button Text</a>

Answer 1

我会考虑一个不同的想法，您将不会遇到问题。将形状仅作为一个元素，并依靠溢出来隐藏不需要的部分。

.button {
  position: relative;
  display:inline-block;
  padding: 0 40px 0 20px;
  line-height: 53px;
  border-left: 4px solid black;
  color: white;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  overflow:hidden;
  z-index: 0;
}

.button::after {
  position: absolute;
  content: '';
  right:0;
  top: 0;
  left:-5px;
  bottom:0;
  background: red;
  border: 4px solid black;
  z-index: -1;
  transform: skew(-31deg);
  transform-origin:top;
}

<a href="#" class="button">Button Text</a>

按钮中偏斜的伪元素周围的轮廓很奇怪

1 个答案: