Я сделал горизонтальное меню, используя список. Я пытаюсь заставить каждый <li> отображаться в виде горизонтального прямоугольника с клиньями, вырезанными из его сторон - snip> <snip - и текстом по центру по горизонтали и вертикали.
Я думал, что смогу сделать это, задав <li> высоту строки 0, сделав границы толстыми, и сделав правую и левую границы прозрачными, но он ведет себя так, как будто все еще .4em высоты линии или что-то вроде .
Примечание о прилагаемом коде: у меня нет ничего похожего на формальное образование, поэтому я ожидаю, что в моем методе и коде будут серьезные пробелы. Я абсолютно готов принять все данные, чтобы сделать мой код семантическим, чистым и простым.
Спасибо за вашу помощь!
#CAPMenu li
{
float:left;
width:95px;
border-top: 20px solid #4672A3;
border-bottom: 20px solid #4672A3;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
line-height:0em;
}
<div id="CAPMenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Idea</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Feasability</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Scale Up</a></li>
<li><a href="#">Launch</a></li>
<li><a href="#">Post Launch</a></li>
</ul>
</div>