菜单 学习猿地 - LMONKEY

 css绘制不规则三角形

css绘制不规则三角形

yangyingjie profile image yangyingjie ・1 min read

css绘制不规则三角形

css绘制不规则三角形原理:

一个盒子包括: margin+border+padding+content上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。调整宽度大小可以调节三角形形状。

(相关课程推荐:css视频教程

#test3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

Snipaste_2019-12-19_16-44-26.jpg

不规则三角形:

#test5 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid solid dashed dashed;
    border-width:58px 22px 4px 26px;
}

Snipaste_2019-12-19_16-45-57.jpg

保留其中一种颜色, 就可以得到斜边在对角线上的三角形了,多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形。

Snipaste_2019-12-19_16-42-59.jpg

评论 (0)