CSS六 Angular 里，怎么样？

Question

我有一个带有“li”-s 的导航菜单。我想像这样把这个 li 变成六 Angular 形:

我该怎么做？

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>