CSS和CSS3实现画出三角形元素-css教程-PHP中文网

CSS和CSS3实现画出三角形元素

不言

发布： 2018-05-09 11:31:08

原创

2099人浏览过

这篇文章主要介绍了关于CSS和CSS3实现画出三角形元素，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

前端页面偶尔需要有三角形图标或者三角形样式，现在图标的三角形大多用字体图标去实现了，但是有些大的三角形模块还是需要前端运用css样式去画出来的，下面介绍各种角度的三角形css样式代码，希望能对大家带来帮助

1：triangle-up

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

登录后复制

2：triangle-down

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

登录后复制

3：triangle-left

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

登录后复制

4：triangle-right

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

5：:triangle-topleft

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

登录后复制

6：triangle-topright

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

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

登录后复制

7：triangle-bottomleft

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

登录后复制

8：triangle-bottomright :

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

登录后复制

以上就是本篇文章的全部内容了，更多相关内容请关注PHP中文网。

大家都在看：

如何使用CSS3和JavaScript实现简单的书籍翻页效果？如何让 CSS3 的 video 标签自动播放视频并播放声音？如何用 CSS3 实现列表的无缝滚动效果？ css3选择器的优先级 css3选择器优先级顺序