首页 > web前端 > css教程 > 正文

纯CSS绘制三角形(各种角度)_基础教程

WBOY
发布: 2016-05-16 12:03:55
原创
1574 人浏览过

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。

今天给大家带来 CSS 三角形绘制方法
纯CSS绘制三角形(各种角度)_基础教程

复制代码 代码如下:

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

纯CSS绘制三角形(各种角度)_基础教程

复制代码 代码如下:

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

纯CSS绘制三角形(各种角度)_基础教程

复制代码 代码如下:

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

纯CSS绘制三角形(各种角度)_基础教程

复制代码 代码如下:

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

纯CSS绘制三角形(各种角度)_基础教程

复制代码 代码如下:

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

纯CSS绘制三角形(各种角度)_基础教程

复制代码 代码如下:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

纯CSS绘制三角形(各种角度)_基础教程

复制代码 代码如下:

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

纯CSS绘制三角形(各种角度)_基础教程

复制代码 代码如下:

#triangle-bottomright {
    宽度:0;
    高度:0;
    边框底部:100px纯红色;
    边框左:100px纯透明;
}




相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!