css三角形绘制方法总结

  • 时间:2018-10-14 23:01 作者:Frontender 来源:Frontender 阅读:179
  • 扫一扫,手机访问
摘要:本文本人已于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)
最新发布的资讯信息
【系统环境|服务器应用】树莓派安装TensorFlow(2020-04-24 21:11)
【系统环境|服务器应用】防面试-SD_WebImage(2020-04-24 21:11)
【系统环境|服务器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【系统环境|服务器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【系统环境|服务器应用】如何轻松学习JavaScript?(2020-04-24 21:10)
【系统环境|服务器应用】【源码剖析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各布局细节参数(2020-04-24 21:10)
【系统环境|服务器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【系统环境|服务器应用】好用的Middleware实现(2020-04-24 21:10)
【系统环境|服务器应用】前台面试每日 3+1 —— 第373天(2020-04-24 21:10)
【系统环境|服务器应用】绍圣--kafka之生产者(五)(2020-04-24 21:10)
手机二维码手机访问领取大礼包
返回顶部