纯CSS如何绘制三角形

CSS 绘制 三角形的方法：1、定义个 宽 高为0的 标签元素 ；2、使用“border- 方向 :边框宽度 solid 边框颜色 ”定义三角形的底边；3、剩下的三边用透明边框设置即可。

本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

三角形 实现原理 ：

宽度（width）为0；高度（h ei ght）为0；

有一条横竖边（上下左右）的设置为border-方向：长度 solid red ，这个画的就是底部的 直线 。其他边使用border-方向：长度 solid transparent。

有两个横竖边（上下左右）的设置，若斜边是在三角形的 右边 ，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

一、向上

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

二、向下

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

推荐学习：css视频教程

以上就是纯CSS如何绘制三角形的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 纯CSS如何绘制三角形 全部内容，希望文章能够帮你解决 纯CSS如何绘制三角形 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于纯CSS如何绘制三角形的详细内容...