-1
A
回答
5
我會使用帶有邊框的僞元素。
* {
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>
+0
非常感謝你的男人! – IamGabros
1
我,像@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>
+0
我會使用一個單一的僞與透視變換:D – Harry
相關問題
- 1. 居中CSS六角形
- 2. 六角CSS(矩形與「箭效應」)
- 3. CSS六角形與內部元素
- 4. 六角形圖像背景css
- 5. 水平六角形按鈕css
- 6. 六角形網格tumblr css代碼
- 7. 單div水平CSS六角形按鈕
- 8. CSS3圓角六角形
- 9. 六角形圖像
- 10. 繪製六角形
- 11. 怎樣才能讓一個語音盒與直角三角形(CSS)
- 12. 我怎樣才能使這樣的CSS形狀與CSS?
- 13. 使用CSS在六角形圖像內插入矩形圖像
- 14. 4列彈性css,左上角框跨越2列。怎麼樣?
- 15. 非空六邊形的六角中心
- 16. 十六進制到六角形速記
- 17. 我怎樣才能申報六角瓦爾在C#
- 18. 3D六角形地圖
- 19. 試圖學習六角形
- 20. 生成六角形島
- 21. openGL ES 2.0六角形
- 22. CSS3或帆布圓角六角形
- 23. 六角形/形狀中的隨機點
- 24. 使用jQuery繪製六角形形狀
- 25. 以六角形的形狀裁剪UIImage?
- 26. angular-cli包的css怎麼樣?
- 27. 你好我怎樣才能使用CSS繪製一個三角形?
- 28. 在六角形網格中創建六角形按鈕的最佳方式
- 29. 平頂六角形六角形網格座標以像素座標
- 30. 在六角形網格中捕捉到最近的六角形中心
請在您的問題中添加更多上下文,菜單項是以普通顏色還是在圖像上顯示E /梯度?添加您嘗試過的示例代碼也是一個優點,您的問題會被社區更好地接受。 –