before,afterで、作ろう三角形！！【全コピペ可】【2024年更新版】

皆さんこんばんわ！AbeGoblinです！

さて！疑似要素ですね！よーくよーく使います。デザインにこだわったデザインであればあるほど使うと個人的には思っています。

自分でいうのもなんですが、今回は正直かなり実践的な内容だと思います。まさにコピペ向きといいますか、これコピペであったら便利だよなぁってずーっと思っていたので記事にしました。

作成方法について。
コードはこれだ！
こちらがサンプルです！
応用編！
最後に

作成方法について。

はい。これに関しては基本的に僕は2パターンしかないと思っています。

デザインから三角形の部分を書き出して疑似要素の背景として使用する。
borderプロパティを使用して、作成する。

この記事では、２のborderプロパティを使用しての三角形の作成方法をご紹介したいと思います。
応用編では三角形以外もご紹介します！

コードはこれだ！

html

<div class="hoge"></div>

css

.hoge{
   width:100px;
   height:100px;
   position:relative;
   background:#000;
}

.hoge::before{
   position: absolute;
   display: block;
   content: "";
   width:0px;
   height:0px;
   border-top: 10px solid transparent;
   border-right: 0px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 24px solid #aaa;
   right:-24px;
}

scss

.hoge{
   width:100px;
   height:100px;
   position:relative;
   background:#000;
   &:before{
      position: absolute;
      display: block;
      content: "";
      width:0px;
      height:0px;
      border-top: 10px solid transparent;
      border-right: 0px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 24px solid #aaa;
      right:-24px;
   }
｝

このソースでは右向きの黒い三角形を作成しています。それを黒の四角形につけています。
解説としましては、

4辺のborderプロパティをそれぞれ別々に設定
頂点にしたい方向の逆(底辺)の方向のプロパティのみに色を付ける
他のborderの色はtransparent(透明)に設定します。

その後、position:absoluteでの位置調整！上下左右に合わせてマイナスpxを入れる感じですね！（右側面に設置する場合はright:-15px; 左側面に設置する場合はleft:-15px;などなど）

こちらがサンプルです！

グレーの三角形が飛び出していますね！！

応用編！

この三角形をうまいこと応用すればこんなこともできます！

矢印

html

<div class="hoge2"></div>

css

.hoge2{
  width:100px;
  height:7px;
  position:relative;
  background:#000;
}
.hoge2::before{
  position: absolute;
  display: block;
  content: "";
  border-top: 10px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 24px solid #000;
  width: 0px;
  height: 0px;
  right: -24px;
  top: -6px;
}

台形

html

<div class="hoge3"></div>

css

.hoge3{
  width:100px;
  height:200px;
  position:relative;
  background:#000;
  margin-left: 24px;
}
.hoge3::after{
  position: absolute;
  display: block;
  content: "";
  border-top: 0px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 200px solid transparent;
  border-left: 24px solid #000;
  width: 0px;
  height: 0px;
  right: -24px;
}
.hoge3::before{
  position: absolute;
  display: block;
  content: "";
  border-top: 200px solid transparent;
  border-right: 24px solid #000;
  border-bottom: 0px solid transparent;
  border-left: 0px solid transparent;
  width: 0px;
  height: 0px;
  left: -24px;
}

ダイヤ

html

<div class="hoge4"></div>

css

.hoge4{
  width:0px;
  height:200px;
  position:relative;
  background:#000;
  margin-left: 50px;
}
.hoge4::before{
  position: absolute;
  display: block;
  content: "";
  border-top: 100px solid transparent;
  border-right: 50px solid #000;
  border-bottom: 100px solid transparent;
  border-left: 0px solid transparent;
  width: 0px;
  height: 0px;
  left: -50px;
}
.hoge4::after{
  position: absolute;
  display: block;
  content: "";
  border-top: 100px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 50px solid #000;
  width: 0px;
  height: 0px;
  right: -50px;
}

最後に

はい！今回は疑似要素を使用した図形のつくり方をご紹介させていただきました！思うに、今回紹介した各borderプロパティを纏めてメモ帳か何かにコピペしておけば、かなり作成の手間は省けるのではないかなと思います！吹き出し等のcss作成で大活躍のように思います！

それでは今回はこのへんで終わりにしたいと思います！ありがとうございました！(^ｑ^)ﾉｼ