与CSS的箭头边框

Question

我在photoshop上设计了一个新网站，当我开始编写导航代码时，我遇到了一个问题。按钮的外观如下：

但我不知道如何编码它所以当我将鼠标悬停在按钮上时，它会显示这些线条。我已经看到开发人员使用CSS创建复杂的形状，但我不知道是否可以完成。 有办法吗？

Answer 1

这个问题需要我们想象一下。要达到您想要的效果，您只需为元素设置border-left和border-right（文本为About）。对于底部边框，您需要2个元素（我们使用伪元素:before和:after）。第一个有border-top和border-right，并且偏向30deg，第二个有border-top和border-left，并且偏向于-30deg。然后，您需要定位这两个元素，以便顶部边框与元素About的底部边框对齐。就这样。以下是代码详细信息：

<强> HTML ：

<li>About</li>

<强> CSS ：

body {
  background:url(http://placekitten.com/800/600);
}
li {
  display:inline-block;
  padding:5px 10px; 
  position:relative;        
  font-size:25px;
  color:white;
  cursor:pointer;
  border:1px solid transparent;
  border-bottom:none;
  border-top:none;    
}
li:hover:before {
  content:'';
  width:calc((100% - 18px)/2);
  height:16px;
  position:absolute;
  left:-1px;
  top:100%;
  display:block;
  border:1px solid white;
  border-left:none;
  border-bottom:none;    
  -webkit-transform: skewX(30deg);    
  -webkit-transform-origin: left top;    
}
li:hover:after {
  content:'';
  width:calc((100% - 18px)/2);
  height:16px;
  position:absolute;
  right:-1px;
  top:100%;
  display:block;
  border:1px solid white;
  border-right:none;
  border-bottom:none;    
  -webkit-transform: skewX(-30deg);    
  -webkit-transform-origin: right top;    
}
li:hover { 
  border-color:white;
}

我使用了一个图像作为身体背景，让你看到边框可以显示在一个图像而不仅仅是在一个坚实的背景上（我们还有很多其他的方法但是当背景是纯色时它们可以显示边框OK ）。另请注意，我刚刚为基于webkit的浏览器使用了-webkit-前缀，您可能需要添加更多前缀和标准属性来完成代码。

Demo.