使用border属性绘制三角形、五角星、心形_u011435776的博客

1. 绘制三角形

<p>直角三角形</p>
<section class="triangle1">
	<style>
		#triangle1 {
			width: 0;
			height: 0;
			border-right: 50px solid transparent; 
			border-bottom: 50px solid red;
		}
	</style>
	<div id="triangle1"></div>
</section>

<p>等腰三角形</p>
<section class="triangle2">
	<style>
		#triangle2 {
			width: 0;
			height: 0;
			border-bottom: 50px solid red;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
		}
	</style>
	<div id="triangle2"></div>
</section>

<p>两个三角形叠加</p>
<section class="triangle3">
	<style>
		.triangle3 {
			position: relative;
		}
		#triangle3 {
			width: 0;
			height: 0;
			border-bottom: 50px solid red;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
		}
		#triangle3:after {
			content: '';
			display: block;
			width: 0;
			height: 0;
			position: absolute;
			top: 10px;
			left: 0;
			border-bottom: 50px solid #fff;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
		}
	</style>
	<div id="triangle3"></div>
</section><p>直角三角形</p>
<section class="triangl