css三角形绘制方法总结

  • 时间:2018-10-14 23:01 作者:Frontender 来源:Frontender 阅读:304
  • 扫一扫,手机访问
摘要:本文本人已于2017-08-25发表于segementfalt:https://segmentfault.com/a/1190000010847765在做UI(页面重构)的时候,免不了和各种小图标打交道,这其中最多的应该是三角形以及箭头,一般情况下可以通过伪类使用unicode处理大部分问题。现在我

本文本人已于2017-08-25发表于segementfalt:https://segmentfault.com/a/1190000010847765

在做UI(页面重构)的时候,免不了和各种小图标打交道,这其中最多的应该是三角形以及箭头,一般情况下可以通过伪类使用unicode处理大部分问题。

现在我们来总结下几种使用css绘制三角形的方法,dom结构如下:

css三角形绘制方法总结

最简单最方便的办法 background

代码忽略

unicode

css三角形绘制方法总结

注意,伪类必需加上content属性,否则不生效

unicode图表:https://blog.csdn.net/lhjuejiang/article/details/79818358

border

css三角形绘制方法总结

使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图:

css三角形绘制方法总结

那么没有了上border就是如下图:

css三角形绘制方法总结

再设置div的宽度为0,就是如下图:

css三角形绘制方法总结

再设置div的高度为0,如下图:

css三角形绘制方法总结

最后设置左右border的颜色为透明,如下图:

css三角形绘制方法总结

再来个动图:

css三角形绘制方法总结

通过这种原理,我们可以做更多的图形,比方五角星、六角星等,更多图形请移步shapesofcss

使用css3 transform rotate

css三角形绘制方法总结

css三角形绘制方法总结

什么是1.41,由于正方形的对角线长度是约等于1.414。

使用clip-path

css三角形绘制方法总结

clip-path不支持安卓4.4以下,其他均需使用浏览器前缀-webkit,http://caniuse.com/#feat=css-clip-path

详细请移步 https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

假如你还有其余方法实现三角形,请给我留言,谢谢

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部