サイト制作メモ

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;も対応ブラウザによってはベンダープレフィックスが必要になることがあります。

- サイト制作メモ
-,

関連記事

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

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

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

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を"postname"にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが反映されURLは以下のよ ...

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

翻訳する