鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

CSSで四隅に枠をつけたい

ブロックの四隅にだけ枠(border)をつけたいと思いました。

イメージは以下のような感じ。

「四隅に枠」のイメージ
「四隅に枠」のイメージ

最初は、途中でborderの色を変えればいいのかな? と思いました。 でも、四隅に小さい四角を用意して、 position: absolute で配置すればいいと気付きました。

イメージは以下のような感じ。

実装イメージ
実装イメージ

結果

うまくいきました!!

【HTML(pug)】

.box
  .box-border.box-border-leftTop
  .box-border.box-border-leftBottom
  .box-border.box-border-rightTop
  .box-border.box-border-rightBottom

CSS(stylus)】

.box
  &-border
    position absolute
    width 20px
    height 20px
    &-leftTop
      border-top 2px solid #B4A8A5
      border-left 2px solid #B4A8A5
      top -1px
      left -1px
    &-leftBottom
      border-left 2px solid #B4A8A5
      border-bottom 2px solid #B4A8A5
      bottom -1px
      left -1px
    &-rightTop
      border-top 2px solid #B4A8A5
      border-right 2px solid #B4A8A5
      top -1px
      right -1px
    &-rightBottom
      border-right 2px solid #B4A8A5
      border-bottom 2px solid #B4A8A5
      right -1px
      bottom -1px

できたもの

「四隅に枠」できあがり
「四隅に枠」できあがり