CSS三角形ジェネレーター

ツールチップ、吹き出し、矢印のUI制作に最適なピュアCSSの三角形を瞬時に作成します。

プレビュー

設定

向き

幅 (px)100px

高さ (px)100px

背景色

生成されたCSSコード

.triangle {
border-style:  solid;
width:  0;
height:  0;
border-left:  50px solid transparent;
border-right:  50px solid transparent;
border-bottom:  100px solid #3b82f6;
}

Tools.CssTriangle.guide.title

Tools.CssTriangle.guide.description

Tools.CssTriangle.guide.guide_1_title

Tools.CssTriangle.guide.guide_1_desc

Tools.CssTriangle.guide.guide_2_title

Tools.CssTriangle.guide.guide_2_desc

Tools.CssTriangle.guide.guide_3_title

Tools.CssTriangle.guide.guide_3_desc