带有CSS的箭头边框 [英] Arrow border with CSS

问题描述

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



但是我不知道如何编码，因此当我将鼠标悬停在按钮上时，它会显示这些行。我见过开发人员使用CSS创建复杂的形状，但是我不知道是否有可能做到这一点。
有办法吗？

I designed a new website on photoshop, and when I started to code the nav, I got into a problem. This is how a button should look like:

But I don't know how I could code it so when I hover over the button,it shows those lines. I've seen developers create complex shapes with CSS, but I don't know if that one will be possible to be done. Is there a way to do it?

推荐答案

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

Such a problem requires us to imagine a little. To achieve the effect you want, you can just set the border-left and border-right for the element (the text of which is About). For the bottom border, you need 2 elements (we use pseudo-element :before and :after). The first one has border-top and border-right and is skewed about 30deg, the second one has border-top and border-left and is skewed about -30deg. Then you need to position those 2 elements so that the top border line up with the bottom border of the element About. That's all. Here are the code details:

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-前缀，您可能想添加更多前缀和standard属性来完成代码。

I used an image for the body background to let you see that the border can show on an image other than just on a solid background (we have many other ways but they can just show the border OK when the background is solid color). Also note that I just used -webkit- prefix for webkit-based browsers, you may want to add more prefixes and the standard property to complete the code.

这篇关于带有CSS的箭头边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！