Question

我想在旁边a导航栏中创建。现在我想知道我是否需要一张图片或者我是否可以用CSS解决它。如果我将鼠标悬停在链接上，我想要一个过渡效果。这是问题的图片：

enter image description here

Answer 1

使用图像（最好是SVG，因此它是基于矢量的）可能是更容易的选择。但是，可以通过利用绘制边框的方式来使用CSS。

详细信息：http://css-tricks.com/snippets/css/css-triangle/

我已经使用了这种技术并将其应用于您的示例：http://jsfiddle.net/s9tn5yqe/

Nav Bar

<强> CSS：

.nav {
    width: 160px;
    font-size: 12px;
    margin: 32px;
    border: 2px solid #000;
}
.nav li {
    width: 96px;
    display: block;
    height: 32px;
    margin: 32px 0;
    background-color: #000;
    border-left-width: 0;
    position: relative;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.nav li:hover {
    width: 128px;
}
.nav li:after {
    content: '';
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-left-color: #000;
    position: absolute;
    right: -32px;
    top: 0;
}
.nav li a {
    color: #000;
    text-decoration: none;
    position: absolute;
    line-height: 32px;
    top: 2px;
    left: 0;
    right: 1px;
    bottom: 2px;
    display: block;
    padding: 0 8px;
    background-color: #fff;
}
.nav li a:after {
    content: '';
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-left-color: #fff;
    position: absolute;
    right: -28px;
    top: 0;
    z-index: 1;
}

<强> HTML：

<ul class="nav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

<强>解释

有两层。第一层是具有黑色背景的li元素。此外，使用:after选择器添加伪元素。该元素的宽度和高度为零，但左侧的黑色边框创建了三角形。 a元素使用相同的技术，但白色和略小，因此黑色li元素可见，并创建所需的边框。

动画是直截了当的，已经是@Preben的答案的一部分。

Answer 2

见这里：

<div class="side">
    <a href="#link">My link</a>
    <a href="#link">My link</a>
    <a href="#link">My link</a>
    <a href="#link">My link</a>
    <a href="#link">My link</a>
</div>

CSS：

.side a {
       background-color:black;
       color:#fff;
       display:block;
       width:200px;
       padding:10px;
       text-decoration:none;
       clear:both;
             }
.side a:hover {
       background-color:rgb(0, 0, 0);
       background-color:rgba(0, 0, 0, 0.3);
}

'background-color：rgba（0,0,0,0.3）;'是黑色背景，不透明度= 0.3我之所以添加背景色而没有不透明度，是因为并非所有浏览器都支持不透明度。这是一个后备。

带动画的版本：

enter image description here

小提琴：http://jsfiddle.net/Preben/09g8dtnh/1/

CSS：

.side a {background-color:black;color:#fff;display:block;width:200px;padding:10px;text-decoration:none;clear:both;-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;}
.side a:hover {width:300px;background-color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0.3);-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;}

使用CSS需要或可以使用的图像

2 个答案: