了解transparent,用transparent透明实现箭头绘制

        transparent：指定透明度（版本更新：background属性->border属性->任何带有color的属性）

        transparent

                用来指定全透明色彩，想当于rgba（0,0,0,0）。

                background-color的默认值。

                CSS3可以应用于所有带颜色设置的属性。

        transparent就是指定透明，要了解transparent绘制箭头就要了解border形成原理

        border形成原理

                四个边框以斜角的形式在盒子的周围。

                当盒子宽高为0的时候，四边以三角形的形式进行相接。

                如果说只有一个边框宽度存在的时候，并且盒子没有高度，则这个边框不会显示，所以必须有两个边框宽度存在并且边框相邻，才会显示。

        

.div1{
	width:0px;
	height:0px;
	background-color:transparent;
	margin:auto;
	border:30px solid red;
	border-color:red green blue yellow;
	/*上*/
	border-color:red transparent transparent transparent;
	/*右*/
	border-color:transparent red transparent transparent;
	/*下*/
	border-color:transparent transparent red transparent;
	/*左*/
	border-color:transparent transparent transparent red;
}

        使用transparent实现四角小箭头

.div3{
	width:0;
	height:0;
	background-color:transparent;
	margin:10px auto;
	border:30px solid transparent;
	border-width:30px 30px 0 0;
	/*左上*/
	border-color:green transparent;
	/*右下*/
	border-color:transparent green;
	border-width:0 30px 30px 0;
	/*左下*/
	border-color:green transparent;
	/*右上*/
	border-color:transparent green;
}

        加上宽高和圆角的话还可以变换成其他各种各样的形状

.div4{
	width:50px;
	height:50px;
	background-color:transparent;
	margin:10px auto;
	border:100px solid transparent;
	border-top-color:red;
	border-radius:600px;
}

真正明白transparent实现透明的原理才能做出各种各样的形状。

--主页传送门--