見出しの枠のcssをどうかけばいいのか教えてください

Question

上記画像のような見出しを作りたいです。

画像を使う以外で、交差するボーダーの枠をcssでどのように書いたらいいのかわかりません。

おわかりの方がいらっしゃいましたら、教えていただけないでしょうか。

よろしくお願いいたします。

Answer 1

数値は適宜調整してください。

h1 {
  display: inline-block;
  padding: 0.8em 1.2em;
  position: relative;
}

h1::before,
h1::after {
  content: '';
  width: 25%;
  height: 30%;
  position: absolute;
}

h1::before {
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, transparent 15%, #666 15%, #666 calc(15% + 1px), transparent calc(15% + 1px)),
              linear-gradient(to right, transparent 15%, #666 15%, #666 calc(15% + 1px), transparent calc(15% + 1px));
}

h1::after {
  right: 0;
  bottom: 0;
  background: linear-gradient(to left, transparent 15%, #666 15%, #666 calc(15% + 1px), transparent calc(15% + 1px)),
              linear-gradient(to top, transparent 15%, #666 15%, #666 calc(15% + 1px), transparent calc(15% + 1px));
}

Comments

[ma7ma7pipipi]

大変勉強になりました。
ありがとうございました。