素直にborder
を使うのは無理だと思います。
ikki57さんの言うように画像で用意するか、或いはlinear-gradient
を使うというのはどうでしょう。
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
ul {
display: block;
padding-right: 0;
padding-left: 0;
}
li {
list-style: none;
display: block;
float: left;
}
/* li要素の後に罫線を引く */
li::after {
/* 罫線の幅 */
width: 1px;
/*
* 上から30%と、下から30%(上から数えて70%以降)を透明に
* 上から30%〜下から30%までを黒に
*/
background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, black 30%, black 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%);
/* 罫線の左右の余白 */
margin-left: 0.5em;
margin-right: 0.5em;
content: "x";
color: rgba(0,0,0,0);
display: inline-block;
}
/* 最後のli要素の後には罫線を引かない */
li:last-child::after {
background-image: none;
content: none;
}
JSFiddleでサンプルを用意してみました。
以下のwebブラウザで表示できる事を確認しました。
- Firefox 42.0
- Chrome 47.0.2526.80
- Edge 25.10586.0.0
- Internet Explorer 11.0.10586.0
難点が在るとしたら、linear-gradient
は2015年12月現在まだW3C勧告になっていないという事でしょうか……
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。