サイト制作メモ

cssでlistのborderを斜め線にする

投稿日:2017年4月28日 更新日:

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。

まずはHTMLでメニュー作成

普通にリストで作成しています。

<ul>
        		    	<li><a href="">TOP</a></li>
        		        <li><a href="">MENU1</a></li>
                		<li><a href="">MENU2</a></li>
                		<li><a href="">MENU3</a></li>
                       
            		</ul>

何もスタイルを指定しない場合はこんな感じですね。
分かりやすいよう背景色のみ指定しています。

スタイルを指定していきます。

まずはメニューを横並び。 これはdisplay:flex;で指定します。

次にliに対してborderを指定します。

右側だけラインが欲しいのでborder-rightの指定です。
このborderを斜めにするのに使用するのがtransformプロパティです。
transform:skewX()で要素を傾斜変形させることができます。
他にも色々な変形がありますので興味のある方は調べてみて下さい。

ul{display:flex;}
li{
-webkit-transform: skewX(150deg);
-moz-transform: skewX(150deg);
transform: skewX(150deg);
border-right: 1px solid #000;
}

ここまでできましたか?
liの要素が斜めになっているのでborderも斜め。

それだけだとテキストも斜めになってしまうのでli aに対して斜めを同じ値だけ戻してあげます。
ついでに間が詰まってるのでpaddingも。
この辺はお好みで指定して下さいね。

li a{
display:block;
transform: skewX(-150deg);
padding:0 10px;
}

こんな感じになります。
ちなみにメニューのテキストを画像に置き換える時はli aに対して背景画像を設定します。
liに画像を指定しちゃうと画像が斜めになりますよ。

一番右のメニューのborderが必要ない場合はli:last-child{border-right:none;}を追加して下さいね。

css指定まとめ


ul{display:flex;}
li{
-webkit-transform: skewX(150deg);
-moz-transform: skewX(150deg);
transform: skewX(150deg);
border-right: 1px solid #000;
}
li a{
display:block;
transform: skewX(-150deg);
padding:0 10px;
}

追記(2017/12/27)

transformプロパティは最新版だけを考えるとベンダープレフィックスは必要ないそうです。
ただ、iOS8以下やAndroid 4.4.x系向けに対応したい時は -webkit-transform の記述を追加します。
display:flex;も対応ブラウザによってはベンダープレフィックスが必要になることがあります。

- サイト制作メモ
-,

関連記事

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ ...

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 無限 ...

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する