html写三角形,css3怎么写三角形？

网页很多时候都应用了css3来写三角形，那么css3要怎么写三角形呢？下面我们来看一下css3写三角形的方法。

css3写三角形(为了好区分姑且按方向区别)：

HTML代码：

css代码：/*箭头向上*/

.arrow-up {

width:0;

height:0;

border: 30px solid transparent;

border-bottom:20px solid red;

}

/*箭头向下*/

.arrow-down {

width:0;

height:0;

border: 30px solid transparent;

border-top:20px solid #0066cc;

}

/*箭头向左*/

.arrow-left {

width:0;

height:0;

border: 30px solid transparent;

border-right:30px solid yellow;

}

/*箭头向右*/

.arrow-right {

width:0;

height:0;

border: 30px solid transparent;

border-left: 50px solid green;

}

效果图：

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：border-width

border-style

border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。border-width 规定边框的宽度。

border-style 规定边框的样式。

border-color 规定边框的颜色。

inherit 规定应该从父元素继承 border 属性的设置。