带边框的 CSS 自定义形状

Question

我正在尝试制作带有标签的菜单。选项卡的样式是这样的：

我需要背景透明并且有边框，悬停时，它会用另一种颜色填充背景。

我曾尝试使用纯 CSS 来做到这一点，我可以使用 :before 和 :after 来获得正确的形状，但是由于我使用边框来做到这一点，我无法在两边都添加边框并最终得到这个：

#pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: red;
  text-align: centre;
  border: 1px solid white;
}

#pointer:after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  margin-bottom: 20px;
  height: 0;
  border-right: 20px solid red;
  border-top: 0px solid red;
  border-bottom: 20px solid transparent;
}

#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid red;
}

<div id="pointer">Tab 1</div>

我也尝试过使用 SVG 来做到这一点，我可以得到正确的形状和边框，但是悬停区域比边框大很多。

    <svg
      class="test"
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 64 64'
      width='150' height='150'
      stroke='white'
      fill='red'>
      <path d='M8 30 L62 30 L62 22 L56 16 L2 16 L8 22 Z' />
    </svg>

我怎样才能使用 CSS 尝试完成边框，或者使 SVG 的悬停区域与边框完全匹配？

Answer 1

这是一个考虑倾斜变换的简单想法：

.box {
  width: 200px;
  height: 80px;
  margin: 20px;
  color:#fff;
  z-index:0;
  position: relative;
  --c: black;
  --b: red;
}

.box:hover {
  --b: blue;
  --c:green;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  height: 50%;
  border: 3px solid var(--c);
  background: var(--b);
  box-sizing:border-box;
}

.box:before {
  top: 0;
  transform: skewX(30deg);
  transform-origin: bottom right;
  border-bottom: none;
}

.box:after {
  bottom: 0;
  border-top: none;
}

<div class="box">
  some text
</div>

对于您的 SVG 形状，您只需缩小 viewBox 以仅覆盖您的形状：

svg {
  border:1px solid
}
svg:hover path{
 stroke:red;
 fill:blue;
}

 <svg
      class="test"
      xmlns='http://www.w3.org/2000/svg'
      viewBox='0 14 64 18'
      width="150"
      stroke='blue'
      stroke-width=2
      fill='red'>
      <path d='M8 30 L62 30 L62 22 L56 16 L2 16 L8 22 Z' />
    </svg>

Answer 2

对于复杂的 shpaes，最好使用svg。

我从您的问题中得到的是，svg 区域/悬停区域比数字大。这是真的。但是您可以通过在 svg 中定位 path 来解决此问题，以使您的风格磨合 path:hover。

我做了一个小sn-p，你可以看看它是如何工作的。

希望这会有所帮助：>

svg {
  background: red;
}

svg:hover {
  background: orange;
}

path:hover {
  fill: blue;
}

<svg
  class="test"
  xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 64 64'
  width='150' height='150'
  stroke='white'
  fill='green'>
  <path d='M8 30 L62 30 L62 22 L56 16 L2 16 L8 22 Z' />
</svg>