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

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

我从你的问题中得到的是，svg 区域/悬停区域比图中大。这是真的。但是你可以通过在 svg 中定位 path 来解决这个问题，使你的风格变得更加 path:hover.

我做了一个小片段，你可以看看它是如何工作的。

希望这对您有所帮助 :>

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>

Answer 2

这里有一个考虑倾斜变换的简单思路：

.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>

CSS 带边框的自定义形状

CSS Custom Shape With Border

css

svg

css-shapes