在CSS中创建一个奇怪的形状 [英] Creating a strange shape in CSS

问题描述

我试图在css中创建这个形状。

我尽可能地去了，我无法在右手边创建尖峰

这是我的CSS

  nav li a {
 float：left; 
 height：23px; 
 line-height：24px; 
职位：亲属; 
 padding：1px 10px 0 24px; 
颜色：#fff; 
背景颜色：＃393233; 
 text-align：center; 
宽度：75％; 
} 
 nav li a：before {
 content：; 
 float：left; 
位置：绝对; 
 top：0; 
剩下：0; 
 width：0; 
 height：0; 
 border-color：white＃393233白色白色; 
 border-style：solid; 
 border-width：12px 12px 12px 12px; 
} 
 nav li a：在{
 content：; 
 float：left; 
位置：绝对; 
 top：0; 
 right：-12px; 
 width：0; 
 height：0; 
边框颜色：＃393233透明＃393233＃393233; 
 border-style：solid; 
 border-width：12px 12px 12px 12px; 
} 
  

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

http://jsfiddle.net/2Cn3a/

非常感谢任何帮助

解决方案

一个解决方案是使用 li 代替 li a 作为相对元素，所以您可以在： $ c>也是如此。在行动中看到它： http://jsfiddle.net/z47fN/

I'm trying to create this shape in css.

I have gone as far as I can and I can't create the spike on the right hand side

Here is my 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;
}

I have created a jsfiddle to express my code.

http://jsfiddle.net/2Cn3a/

Any help is much appreciated

解决方案

One solution would be to use li instead of li a as relative element, so you can add one more :after to it as well. See it in action: http://jsfiddle.net/z47fN/

这篇关于在CSS中创建一个奇怪的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！