Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

CSSで三角形を描く

Html + CSSで三角形を描きます。

css_三角形

borderを使う場合

<style>

.triangle{
	width: 0;
	height: 0;
	border-right: 100px solid transparent;
	border-bottom: 173.2px solid #F2BB05;
	border-left: 100px solid transparent;
}

</style>

<div class="triangle"></div>

divのborderをうまく利用することで三角形を描くことができます。図解付きで詳細な説明をされているページがございますので、ご参考になさってください。

参考リンク

linear-gradientを使う場合

linear-gradient

.triangle{
	width: 200px;
	height: 173.2px;
	background:
		linear-gradient(to bottom right,white 50%, navy 50.5%) no-repeat top left/50% 100%,
		linear-gradient(to bottom left, white 50%, yellowgreen 50.5%) no-repeat top right/50% 100%;
}

参考リンク