CSS六角形li怎么样？

Question

我有'li'-s导航菜单。 我想使这个李六方这样的：

我怎样才能做到这一点？

Answer 1

我会使用带有边框的伪元素。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    text-align: center; 
 
    font-size; 64px; 
 
    text-transform:uppercase; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    background: black; 
 
    color: white; 
 
    padding:.5em 2em 0; 
 
    margin: 2em; 
 
    position: relative; 
 
} 
 

 
li:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top:100%; 
 
    left:0; 
 
    width: calc(100% - 1em); /* twice border width */ 
 
    border:.5em solid transparent; 
 
    border-top-color:black; 
 
}

<ul> 
 
    <li>Text</li> 
 
    <li>Longer Text</li> 
 
    <li>Really Long Text</li> 
 
</ul>

Answer 2

我，像@Paulie_D，将使用伪元素，但我会在一个稍微不同的方式来创建它，（使用偏斜）：

html,body{ 
 
    margin:0;padding:0; 
 
    background:url(http://www.lorempixel.com/900/900); 
 
    } 
 
li { 
 
    min-height: 30px; 
 
    width: 100px; 
 
    background: tomato; 
 
    position: relative; 
 
    margin: 15px; 
 
    display:inline-block; 
 
    text-align:center; 
 
    vertical-align:top; 
 
} 
 
li:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 0; 
 
    width: 80%; 
 
    height: 10px; 
 
    transform: skewX(-45deg); 
 
    transform-origin: top right; 
 
    background: inherit; 
 
} 
 
li:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    width: 80%; 
 
    height: 10px; 
 
    transform: skewX(45deg); 
 
    transform-origin: top left; 
 
    background: inherit; 
 
}

<ul> 
 
    <li>Text</li> 
 
    <li>Really Long Text which spans multiple lines</li> 
 
</ul>