在CSS中创建一个奇怪的形状

enter image description here

我已经是尽我所能，我不能创建右侧

这里秒杀我的CSS

nav li a { 
    float: left; 
    height: 23px; 
    line-height: 24px; 
    position: relative; 
    padding: 1px 10px 0 24px; 
    color: #fff; 
    background-color: #393233; 
    text-align: center; 
    width:75%; 
} 
nav li a:before { 
    content: ""; 
    float: left; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-color: white #393233 white white; 
    border-style: solid; 
    border-width: 12px 12px 12px 12px; 
    } 
nav li a:after { 
    content: ""; 
    float: left; 
    position: absolute; 
    top: 0; 
    right: -12px; 
    width: 0; 
    height: 0; 
    border-color: #393233 transparent #393233 #393233; 
    border-style: solid; 
    border-width: 12px 12px 12px 12px; 
}

我创建了一个的jsfiddle来表示我的代码。

http://jsfiddle.net/2Cn3a/

任何帮助深表感谢

来源

2014-07-06 Wiseguy

您将需要添加另一个DOM元素做出最终三角据我可以看到。 –

一个解决方案是使用li代替li a为相对元素，这样就可以多一个:after添加到它。看到它的行动：http://jsfiddle.net/z47fN/

来源

2014-07-06 20:36:45 c69

这太棒了。谢谢 – Wiseguy

如果你添加一个跨度的标签后，你可以在里面创建另一个箭头。

http://jsfiddle.net/2Cn3a/1/

<style> 
span { 
    position: absolute; 
    float:left; 
    background-color: transparent; 
    border-color: transparent transparent transparent #393233; 
    border-style: solid; 
    border-width: 12px 12px 12px 23px; 
} 
</style> 


<nav> 
    <li> 
    <a href="#">Hello</a> 
    <span></span> 
    </li> 
</nav>

来源

2014-07-06 20:43:35

用':: after'不能达到同样的效果吗？ – Luke

在CSS中创建一个奇怪的形状

回答

相关问题