仕切りの付いたインライン要素のリストをレスポンシブ対応させたい

前提・実現したいこと

仕切りのための斜めボーダーを入れて並べたliを、レスポンシブによってliが折り返して表示された際に
各行の初めのボーダーを取り除きたい。

↓これを
リスト1/リスト2/リスト3/リスト4/リスト5

レスポンシブによって

リスト1 / リスト2 / リスト3
/ リスト4 / リスト

や、

リスト1 / リスト2
/ リスト3 / リスト4
/ リスト5

となるのを、

リスト1 / リスト2 / リスト3
リスト4 / リスト5

リスト1 / リスト2
リスト3 / リスト4
リスト5

にしたい。

該当のソースコード

試したこと

javascriptでulの高さを取得し、現在の行数を計算。
その上で各行の初めに対してcssを適用させれば実現できそうですが、
これをコードでどのように書けばいいのかわかりません。

ご指導をお願いできますでしょうか。

liveasnotes

2018/08/15 06:42

aタグの閉じタグを忘れてますよ

行動規範の内容に同意します

回答3件

自己解決

皆様からいただいたアドバイスを参考に以下のソースで実現できました。

html
1<div>
2　　<ul>
3　　　　<li><a href="#">リンク1</a></li>
4　　　　<li><a href="#">リンク2</a></li>
5　　　　<li><a href="#">リンク3</a></li>
6　　　　<li><a href="#">リンク4</a></li>
7　　　　<li><a href="#">リンク5</a></li>
8　　</ul>
9</div>

css
1div {
2	overflow: hidden;
3}
4
5ul {
6	margin-left: -20px;
7}
8
9ul li {
10    display: inline;
11	border-left;1px solid #000;
12	margin-left: 10px;
13	padding-left: 10px;
14}
15ul li a {
16    display: inline-block;
17}

各リスト（li）の左側に作ったボーダー＋余白を、

1.リスト全体を包んだ要素（div）に「overflow:hidden」をかけ、
2.リスト全体（ul）にネガティブマージンを取ることで、

表示領域から隠します。
斜め線もli要素に斜め線のbackgroundイメージを設定することで実現できました。

x_xさん、liveAsNotesさんありがとうございました。

投稿2018/08/16 01:10

mth

総合スコア8

こういうことでしょうか

 https://thimbleprojects.org/liveasnotes/532256/
右上のリミックスボタンから，ソースコードを閲覧・編集できます

この辺が実装のポイントです↓

css
1ul{
2  list-style: none;
3  display: flex;
4  flex-wrap: wrap;
5  padding: 0;
6  overflow: hidden;/*ここ重要*/
7}
8
9li{
10  position: relative;
11  flex: 0 0 6.5rem;
12  margin-right: 1.5rem;/*ここ重要*/
13  padding: 1rem;
14}
15li::after{/*ほぼ全部重要*/
16  content: "";
17  position: absolute;
18  top: 0;
19  left: 0;
20  width: 1px;
21  height: 100%;
22  background: #aaa;
23  transform-origin: top right;
24  transform: rotate(25deg) translate(-.2rem, 3px);
25}