我有一个带有“li”-s 的导航菜单。 我想像这样把这个 li 变成六 Angular 形:
我该怎么做?
最佳答案
我会使用带边框的伪元素。
* {
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>
关于CSS六 Angular 里,怎么样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30478246/