主页 / 问题 / 1591654
Accepted
Dron245
Asked:2024-08-23 14:24:44 +0000 UTC2024-08-23 14:24:44 +0000 UTC

斜角按钮及其效果

  • 772

按钮示例

有人用过带有切角的按钮吗？互联网上有关于如何做到这一点的提示（使用clip-path伪元素）。

但任务很复杂，因为您需要将效果附加到这样的按钮，即hover-e 处的发光。

这是可行的，但由于clip-path发光，它不会向外扩散，并且伪元素很难突出显示。

也许有人已经解决了类似的问题

css

1 个回答

  1. Best Answer

    可惜的是，这样的元素很难创建，因为 CSS 不知道如何创建这种对象以便充分使用笔触、阴影等。

    但是，例如，您可以使用集体农场重新创建这样的笔画linear-gradient。
    悬停时使用相同的阴影linear-gradient，但在伪元素上，该伪元素将位于下面的一层。
    但是对于“填充”，我不得不考虑它并且无法弄清楚如何使用伪元素，但是使用clip-path.
    （为什么会这样，这样clip-path按钮上的阴影就不会“吃掉”）

    最后的结果是这样的：

    @import 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap';
body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  overflow: hidden auto;
  margin: 0;
}

.chamfered-corner {
  --accent-color: #ff881a; /* Цвет обводки и заливки */
  --border-width: 1px; /* Толщина обводки */
  --skew-width: 15px; /* Ширина "скошенного угла" */
  --skew-height: 15px; /* Высота "скошенного угла" */
  display: block;
  border: 0;
  background-color: transparent;
  padding: 1em;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  position: relative;
  cursor: pointer;
  transition: color .3s ease;
}

.chamfered-corner,
.chamfered-corner::before {
  background-image:
    linear-gradient(var(--accent-color) 0 0),
    linear-gradient(var(--accent-color) 0 0),
    linear-gradient(to left top,
      transparent calc(50% - var(--border-width) / 1.15),
      var(--accent-color) calc(50% - var(--border-width) / 2),
      var(--accent-color) calc(50% + var(--border-width) / 2),
      transparent calc(50% + var(--border-width) / 1.15)),
      linear-gradient(var(--accent-color) 0 0),
      linear-gradient(var(--accent-color) 0 0
    );
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 100%;
  background-size: 
    100% var(--border-width),
    var(--border-width) calc(100% - var(--skew-height)),
    var(--skew-width) var(--skew-height),
    calc(100% - var(--skew-height)) var(--border-width),
    var(--border-width) 100%;
}

.chamfered-corner::before,
.chamfered-corner::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.chamfered-corner::before {
  --border-width: 3px; /* Толщина обводки увеличена, чтобы тень была более насыщенной */
  filter: blur(5px);
  opacity: 0;
  transition: opacity .3s ease;
}

.chamfered-corner::after {
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--skew-height)),
    calc(100% - var(--skew-width)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--skew-height)),
    calc(100% - var(--skew-width)) 100%,
    0 100%
  );
  transition: background-color .3s ease;
}

.chamfered-corner:hover::before {
  opacity: .65;
}

.chamfered-corner:active::before {
  opacity: 1;
}

.chamfered-corner:active::after {
  background-color: var(--accent-color);
}

.chamfered-corner--blue {
  --accent-color: #73e4ec;
}

.chamfered-corner--blue:active {
  color: #000;
}
    <button class="chamfered-corner">Позвонить нам</button>

<button class="chamfered-corner chamfered-corner--blue">ВСтаке</button>

    • 3

相关问题