我在photoshop上设计了一个新网站,当我开始编写导航代码时,我遇到了一个问题。 按钮的外观如下:
按钮图片
但是我不知道如何编码,因此当我将鼠标悬停在按钮上时,它会显示这些行。 我已经看到开发人员使用CSS创建复杂的形状,但是我不知道是否有可能做到这一点。 有办法吗?

===============>>#1 票数:1

这样的问题需要我们想象一下。 要获得所需的效果,您只需为元素(文本为About )设置border-left border-right 对于底部边框,您需要2个元素(我们使用伪元素:before:after )。 第一个具有border-topborder-right ,偏斜约30deg ,第二个具有border-topborder-left ,偏斜约-30deg 然后,您需要定位这2个元素,以使顶部边框与About元素的底部边框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;
}

我使用图像作为主体背景,以使您看到边框可以显示在图像上而不是纯色背景上(我们还有许多其他方式,但是当背景是纯色时,它们只能显示确定的边框)。 还要注意,我只是在基于Webkit的浏览器中使用了-webkit-前缀,您可能需要添加更多前缀和standard属性来完成代码。

演示。

  ask by Lucas T. translate from so

未解决问题?本站智能推荐: