css3三角形

2015-4-16 12:54:35 人评论 次浏览 分类:进阶样式

CSS绘制三角形方法一

	 .arrow:before{
		content:"";
		width:0;
		height:0;
		border:10px solid red;
		position:absolute;
		top:0;
		left:0;
		/*
			三角向右
			border-color: transparent transparent transparent #000;
		*/
		/*
			三角向下
			border-color:#000 transparent transparent ;
		/*
			三角向上
			border-color:transparent transparent #000;
		*/
		/*三角向左*/
		border-color: transparent #000 transparent transparent;/* #000:三角形颜色 */
	 }


CSS绘制三角形方法二


.sanjiao {
    width: 0;
    height: 0;
    display: inline-block;
    border: 200px solid #fff; /* 三角形大小 */
    /*
    如想改变三角形的方向只需要给指定的方向设置颜色,
    同时将其他的方向设置为transparent即可。
    ps:设置的方向与真实方向相反 例如:
    border-top: 200px solid red;箭头方向向下。 
    */
    border-bottom: 200px solid transparent;
    border-top: 200px solid red;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
}



上一篇:没有了

下一篇:列表标签 -- 思鹏代码库

共有访客发表了评论 网友评论

验证码: 看不清楚?