テキストの縦幅より短い、border-rightを引く方法

Question

divの縦幅より短いborder-rightを引くにはどうすれば良いか？

Answer 1

border-image を使うのはどうでしょうか。

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/42j5nb7h/

div{
  border-right: 3px solid;
  border-image: linear-gradient(transparent 0 20%, gray 20% 80%, transparent 80% 100%) 0 100% 0 0;
}

Comments

[tent8]

ありがとうございます！
解決することができました！

[Lhankor_Mhy]

お役に立てたようで何よりです

Answer 2

:afterあたりの疑似要素でborderを追加する感じでどうでしょう？

 <div class="b">あいうえお</div>

.b{
  background:whitesmoke;
  position:relative;
  width:calc(100%-1px);
}
.b:after{
  position:absolute;
  right:-1px;
  bottom:0;
  display:block;
  content:'';
  border-right:1px solid tomato;
  height:10px;
}

Comments

[recal]

borderのようにpaddingの外側に線を引く必要はなかったということでしょうか?

[Lhankor_Mhy]

私の回答のことでしたら、padding の外側に線がありますよー。
background-clip の初期値は border-box なので、padding-box にしてみればわかると思います。

[recal]

わー補足ありがとうございます。
box-sizingを外すとborderなのにpaddingが広がるような挙動してるから不思議に思ってたんです、
通常のborderも内側を押し広げて内側に惹かれているのだろうか?と。
background-clip: padding-box;というものがあるんですね。
まだまだ知らないプロパティが多いなぁ、勉強になりました、ありがとうございました。