CSS样式写出三角形

CSS样式写出三角形的样式，在这里只举出两个例子，三角形朝上和三角形朝下，还有左上，左下，右上，右下。有需要或者感兴趣的可以自己调一下代码。调border的top、bottom、left、right的 transparent 或者#000。三个为一组，其中两个属性为transparent。另一个为#000或其他颜色。

1、简单的写一个div,用div的class名写出样式，transparent属性：定义个父元素颜色相同。

.triangle{
 width:0;
 height:0;
 border: 10px solid transparent;
 border-bottom-color: #000;
}

<div class="triangle"></div>

 

效果图：

 

2、

.triangle{
 width:0;
 height:0;
 border:10px solid transparent;
 border-top-color:#000;
}

 

<div class="triangle"></div>

 

效果图：

3、向左或者向右效果，修改border-right-color或者border-left-color属性即可。