CSS/三角

#sample1 {
	width: 0px;
	height: 0px;
	border: 30px solid;
	border-color: blue red yellow purple;
	margin: 50px;
}

#sample2 {
	width: 0px;
	height: 0px;
	border: 30px solid transparent;
	border-top: red 20px solid;
	margin: 50px;
}

#sample3 {
	width: 0px;
	height: 0px;
	border-top: 80px solid blue;
	border-right: 10px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 10px solid transparent;
	margin: 50px;
}

#sample4 {
	width: 0px;
	height: 0px;
	border-top: 10px solid green;
	border-right: 30px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 30px solid transparent;
	margin: 50px;
}

#sample5 {
	width: 0px;
	height: 0px;
	border: 30px solid transparent;
	border-top: 30px solid purple;
	border-radius: 100%;
	margin: 50px;
}

#sample6 {
	background: #000;
	color: #fff;
	text-align: center;
	width: 30%;
	padding: 8px 0;
	border-radius: 12px;
	position: relative;
	margin: 50px;
}
#sample6:before{
	content: "";
	position: absolute;
	bottom: -23px;
	right: 30%;
	border: 12px solid transparent;
	border-top: 12px solid #000;
}

#sample7 {
	border: 1px solid #333;
	text-align: center;
	width: 30%;
	padding: 8px 0;
	border-radius: 12px;
	position: relative;
	margin: 50px;
}
#sample7:after{
	content: "";
	position: absolute;
	bottom: -23px;
	right: 30%;
	border: 12px solid transparent;
	border-top: 12px solid #fff;
}
#sample7:before{
	content: "";
	position: absolute;
	bottom: -24px;
	right: 30%;
	border: 12px solid transparent;
	border-top: 12px solid #333;
}