CSS三角形生成ツール

CSS Triangle Generator

簡単に使えるCSS三角形生成ツールです。辺の数値を入力するだけでCSSが生成されます。

三角形の形状

自由形状正三角形直角二等辺三角形

カラー

頂点の位置

上右下左

大きさ

底辺：高さ：

擬似要素として生成

/* Border方式 */
.triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 50px 100px 50px;
	border-color: transparent transparent #00a2a2 transparent;
}

/* Clip-path方式 */
.triangle {
	position: relative;
	width: 100px;
	height: 100px;
	background-color: #00a2a2;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Ads by Google