-
1:ID:eHkA2Y · 2018-12-07

#css cssで、矩形の四隅にだけボーダーを付けたいと思っています。
下記URLのような仕様ですが、無駄なdivを書かず、擬似要素や他の方法でスマートに書くにはどうすればいいでしょうか?
http://tacosvilledge.hatenablog.com/entry/2018/11/14/202327

10 件の回答

2:ID:L27el6 · 2018-12-07

画像使うのOKならsvgかなにかで「という画像を作って、
beforeをblock要素にしたやつに背景を2枚設定(上左と上右。それぞれleft:0、right:0とする)、
afterにも同じように背景に2枚設定するというのはどうだろう。
borderでやりきるのは無理っぽい気がする。

4:ID:C3s/bP · 2018-12-07

空タグ入れたくないなら背景画像かね。
親タグに::beforeで絶対配置、
left-1px top-1px 縦横calc(100% + 2px)とか。
background-positionで四隅に画像配置とか。

5:ID:ohE.wE · 2018-12-07

border-image でゴニョゴニョする。

6:ID:zXpcKd · 2018-12-08

ボーダーのあれだ、グラデを作る。。

7:ID:/3FTPS · 2018-12-08

要素がサイズ固定なら10*10のbeforeに黒のbox-shadowを4つ重ねて位置をずらして、afterで灰色重ねるとか?

8:ID: · 2018-12-11

ご回答ありがとうございます。
画像は未使用でサイズは固定でも大丈夫です。
黒のbox-shadowを4つ重ねる方法を試してみたいと思います。

9:ID:3AEMdB · 2018-12-13
10:ID:SbJVyp · 2018-12-13

Re:9
そんなのあるんだ!

11:ID:oxsvFw · 2018-12-13

SVGとborder-image-sliceでやってみたよ。
https://codepen.io/anon/pen/REWzzR

divのheightを指定したときの挙動とかがちょっと独特で、よくわからない…。

1 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る