css画两个向上的三角形,div css卷页

响应式 css，css div界面登录，没有css是什么感觉，css生活中的应用，css3怎么上下居中，按钮阴影css怎么做，div css卷页

.triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid red;
}
.triangle-up-inverse {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid blue;
}

上面的代码中，大家定义了两个class：triangle-up和triangle-up-inverse。下面是这两个class对应的HTML代码：

<div class="triangle-up"></div>
<div class="triangle-up-inverse"></div>

大家可以看到，这两个class的实现方法是一样的，只是border-bottom变成了border-top。大家来逐步解释这些CSS属性：

• width: 0; height: 0; 表示这个div的宽和高都为0，也就是说这个div默认是不可见的。
• border-left、border-right、border-bottom和border-top用来设置div的边框样式，分别表示左、右、下、上四个方向的边框。
• solid表示实线边框，transparent表示边框为透明。
• 30px表示边框的宽度。
• red和blue表示边框的颜色。

以上就是画两个向上的三角形的代码和说明。读者可以尝试修改这些属性的值，画出不同样式的三角形。