利用Css--border设计三角形

来源：互联网发布：欧盟2015年gdp总量数据编辑：程序博客网时间：2024/06/05 18:15

A:表示DIV的宽度

B：表示DIV的高度

C：表示左边框的宽度

D：表示右边框的宽度

E：表示上边框的宽度

AA：表示左边框的宽度

BB：表示右边框的宽度

E：表示上边框的宽度

当相邻边框宽度不为0时，拐角会变为三角形拼合的图形

当A、B为0时：

F的宽度（上边框的宽度）=C+D=AA+BB；

上边框的高度（即原先定义的上边框宽度）=E

若再将左、右边框的颜色设置为无时，即CC、DD为无色

图形变为一个由边框构成的三角形

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.relative{margin-top: 200px;margin-left: 200px;position: relative;}.arrow{bottom: 12px;    position: absolute;    /**     * 表明该Div不具有高度宽度，仅仅只有边框     */    width: 0px;    height: 0px;    border-left: 60px solid transparent;    border-right: 60px solid transparent;    /*上边框的边框宽度*/    border-top: 100px solid #FF0000;        font-size: 0px;    line-height: 0px;    z-index: 19;    left: -2px;}</style></head><body><div class="relative"><div class="arrow"></div></div></body></html>

阅读全文

0 0