search
LoginSignup
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

【初心者でもわかる】一部が欠けたborder(枠)の作り方

どうも7noteです。線が欠けている(途切れている)borderの作り方

方法としては、borderの上に背景と同じ色の疑似要素を重ねて消えてるように見せるやり方です。

完成見本

mihonA.png

作り方

index.html
<div class="box">
  <!--内容書くところ-->
</div>
style.css
.box {
  width: 300px;
  height: 100px;
  border: solid 2px #e6e6e6;
  position: relative;
}

/* 疑似要素を重ねて置き、消えてるように見せる */
.box::before {
  content: "";
  width: 200px;
  height: 2px;
  background: #FFF;
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
}

mihonC.png

疑似要素の背景をグラデーションにして箱内だけ色を付けるのも可能

style.css
.box {
  width: 300px;
  height: 100px;
  background: #faa;
  border: solid 8px #e6e6e6;
  position: relative;
}

.box::before {
  content: "";
  width: 200px;
  height: 8px;
  background: linear-gradient(#fff 49% ,#faa 50%); /* ←グラデーションに変更 */
  display: inline-block;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

mihonB.png

他にも疑似要素の配置を変えて様々な箇所を消す事ができます。

  • 上下2個所を消す
  • 左右2個所を消す
  • 対角線上の角と角を消す

等々

まとめ

本質的には消しているわけではなく錯覚させているだけなので、色の変更などがあれば2個所以上変更しないといけなくなるので注意が必要です!
たまにこんなデザインでてくるのですが、疑似要素でソースがスッキリ、スタイリッシュにできる方法でした。

おそまつ

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1
Help us understand the problem. What are the problem?