前回の続き。
メニューの頭に矢印
＞のような矢印をCSSで書いてメニューの頭に付ける。
作り方の流れとしては
- border-top, border-rightで線を書く
- translateのrotationで45度傾ける
cssのコードは以下のとおり。
矢印
a:before {
margin-right: 1em;
content: "";
display: inline-block;
position: relative;
border-top: solid 1px #000;
border-right: solid 1px #000;
width: 0.8em;
height: 0.8em;
transform: rotate(45deg);
}
widthとheightは0.8emとして高さが文字のサイズと同じにした。
45度傾けると高さが横幅の$\sqrt{2}$になる。
0.8を$\sqrt{2}$すると1になるため高さが1emになる。
完成
その他デザインを整えて完成。
便利だったのが奇数番目要素を指定する擬似クラスnth-chile(odd)。
oddをevenに変えると偶数番目を指定できる。
完成
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
margin: 10px 0;
list-style: none;
border-top: double 3px #000;
}
ul:after {
content: "";
display: block;
clear: both;
}
li {
float: left;
width: 50%;
border-bottom: solid 1px #000;
box-sizing: border-box;
}
li:nth-child(odd) {
border-right: solid 1px #000;
}
a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color: #000;
}
a:before {
margin-right: 1em;
content: "";
display: inline-block;
position: relative;
border-top: solid 1px #000;
border-right: solid 1px #000;
width: 0.8em;
height: 0.8em;
transform: rotate(45deg);
}
</style>
</head>
<body>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
<li><a href="#">メニュー6</a></li>
</ul>
</body>
</html>