Arrow border with 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?

回答1:

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;
}

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.

Demo.

来源：https://stackoverflow.com/questions/23189953/arrow-border-with-css