CSSのspanタグで三角を描く方法

CSSのspanタグで三角を描く方法

CSSのspanタグで三角を描いてみます。borderを使用します。

cssです。

.danraku{
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid green;
}

#danraku{
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 20px solid green;
}

これで下向きの三角を描くことができます。

サンプル

上向きの三角を描く場合はborder-topのtransparent（透明）を外して、何か色を付けます。

そして、border-bottomにtransparentをつけます。

cssです。

.danraku{
  border-top: 10px solid green;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

#danraku{
  border-top: 20px solid green;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

サンプル

CSSのdivタグで円を描く方法

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^