主页 / coding / 问题 / 79351961
Accepted
Yoraplat
Asked: 2025-01-13 19:00:13 +0800 CST

如何使锚标记的内容溢出其自身的边框，从而产生剪切效果？

  • 772

我正在尝试设计一个像这样的锚标记：

在此处输入图片描述

我遇到的问题是，我无法找到一种方法来剪切右边框，从而产生图中所示的效果。请注意，按钮背景颜色必须是透明的，并且会根据文本的行高剪切边框。

这是我目前能够实现的：

在此处输入图片描述

a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
}

a::before {
  content: "";
  width: 100px;
  border: 1px solid red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}
<a href="#">Neem contact met ons op</a>

html

3 个回答

  1. Best Answer

    最简单的方法可能是将边框分成三部分。元素本身只获得一个左边框，然后分别使用两个伪元素作为顶部和底部部分。（我在这里为每个部分使用了不同的颜色，因此您可以轻松分辨出哪个是哪个。）

    如果您希望右侧的部分边框更长/更短，请使用top/百分比。bottom

    a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
  border-left: 1px solid green;
}

a::before,
a::after {
  content: "";
  width: 100px;
  position: absolute;
  left: 0;
}

a::before {
  top: 0;
  bottom: 80%;
  border-top: 1px solid red;
  border-right: 1px solid red;
}

a::after {
  top: 80%;
  bottom: 0;
  border-bottom: 1px solid blue;
  border-right: 1px solid blue;
}
    <a href="#">Neem contact met ons op</a>

    • 0

  2. 玩转渐变：

    a {
  --t: 2px; /* thickness */

  display: inline-block;
  font-size: 25px;
  color: red;
  text-decoration: none;
  padding: .5em 1em;
  border-image: linear-gradient(90deg,currentColor 50%,#0000 0) 1/var(--t);
  background: linear-gradient(currentColor calc(50% - .5lh), #0000 0 calc(50% + .5lh), currentColor 0) 50%/var(--t) 100% no-repeat
}
    <a href="#">Neem contact met ons op</a>

    您可以添加另一个变量来控制偏移量：

    a {
  --t: 2px; /* thickness */
  --o: 50%;  /* offset */

  display: inline-block;
  font-size: 25px;
  color: red;
  text-decoration: none;
  padding: .5em 1em;
  border-image: linear-gradient(90deg,currentColor var(--o),#0000 0) 1/var(--t);
  background: linear-gradient(currentColor calc(50% - .5lh), #0000 0 calc(50% + .5lh), currentColor 0) var(--o)/var(--t) 100% no-repeat
}
    <a href="#">Neem contact met ons op</a>
<br>
<br>
<a href="#" style="--o:20%">Neem contact met ons op</a>
<br>
<br>
<a href="#" style="--o:70%">Neem contact met ons op</a>

    • 0

  3. 根据文本的行高剪切边框 - 使用遮罩。

    a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
}

a::before {
  --border-thickness: 2px;
  content: "";
  width: 100px;
  border: var(--border-thickness) solid red;
  position: absolute;
  inset: 0;
  mask: 
    linear-gradient(black, black),
    conic-gradient(black, black) 100% 50% / var(--border-thickness) 1lh no-repeat;
  mask-composite: subtract;
}
    <a href="#">Neem contact met ons op</a>

    根据文本的行高剪切边框 - 使用剪辑路径。

    a {
  display: inline-block;
  color: red;
  text-decoration: none;
  position: relative;
  text-align: center;
  padding: 10px 20px;
}

a::before {
  --border-thickness: 2px;
  content: "";
  width: 100px;
  border: var(--border-thickness) solid red;
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0% 0, 
    100% 0%, 
    100% calc(50% - 0.5lh), 
    calc(100% - var(--border-thickness)) calc(50% - 0.5lh), 
    calc(100% - var(--border-thickness)) calc(50% + 0.5lh), 
    100% calc(50% + 0.5lh), 
    100% 100%, 
    0 100%);
}
    <a href="#">Neem contact met ons op</a>

    • 0

相关问题