背景要素の四隅に四角をつくりたいです

Question

前提・実現したいこと

背景の四隅に四角を作りたいです

発生している問題・エラーメッセージ

画像のように四隅のところに四角をつくりたい
のですが方法が見つけられませんでした

試したこと

四隅を三角にする方法は出てくるのですが
四角にする方法がなかなか出てこなかったため
こちらで質問させていただいております。

PDFのためデベロッパーツールは使えません。

Answer 1

下記でどうでしょう。
背景色をグレーにして、背景色白の疑似要素を重ねてみました。

<div class="wrapper">
  <div>Contact</div>
</div>

.wrapper {
  text-align: center;
  width: 200px;
  height: 150px;
  position: relative;
  background-color: gray;
}

.wrapper::before,
.wrapper::after {
  position: absolute;
  content: "";
  display: block;
  background-color: #fff;
}

.wrapper::before {
  top: 1px;
  bottom: 1px;
  left: 10px;
  right: 10px;
}

.wrapper::after {
  top: 10px;
  bottom: 10px;
  left: 1px;
  right: 1px;
}

.wrapper > div {
  position: relative;
  z-index: 1;
}

---

疑似要素に左右ボーダーを表示させた方かシンプルかな。

.wrapper {
  text-align: center;
  width: 200px;
  height: 150px;
  border: 1px solid #aaa;
  position: relative;
}

.wrapper::before,
.wrapper::after {
  position: absolute;
  content: "";
  display: block;
  right: 0;
  left: 0;
  height: 10px;
  border-left: 10px solid #aaa;
  border-right: 10px solid #aaa;
}

.wrapper::before {
  top: 0;
}

.wrapper::after {
  bottom: 0;
}

Comments

[yusukelion]

的確なアドバイスありがとうございます！！
すぐに実装できました！ありがとうございます????

Answer 2

こんにちは。

背景ではないのですが、ボーダーを使ったやり方はどうでしょうか。

サンプル

div{
  border: 10px solid;
  border-image: linear-gradient(gray, gray) 50%;
}

Comments

[hatena19]

border-image でできるんですね。
シンプルでいいですね。
ただ border-image-slice: 50%; で四隅になるという原理が理解できない(;^_^A

[Lhankor_Mhy]

これ、わかりにくいですよね。
私も感覚で設定してるところがあります。

https://media.prod.mdn.mozit.cloud/attachments/2012/08/09/3814/3b26a56cb4d814b0798a5509d6c2dccd/border-image-slice.png
50%にすると、↑この画像で言う、topとbottom・leftとrightがくっつくので、
辺の画像が0%になるので……みたいなことのようです。

[hatena19]

mdnの解説とその図を見比べて、なんとなく分かったような、分からないような・・・。
でも使いこなせるといろいろなことができそうです。