fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

CSS三角形生成器
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

点击使用

css三角形生成器 ,使用CSS绘制三角形,直接转换成css可直接使用工具。支持方向 上 右 下 左 右上 右下 左下 左上,支持IE6(加上滤镜 filter) 等边 等腰 不等边等。

利用css伪元素代码生成,前端开发过程中经常会利用到这一工具。


核心思想

其实核心就几句话,宽高设置为0,由边框来控制大小,然后边框颜色改为透明,然后更改一遍的边框颜色为自己想要的颜色,就能实现三角形效果

注:span是内联元素,必须转块元素,才能设置宽高
注:left控制向右的三角,right控制向左的三角,top控制向下的三角,bottom控制向上的三角

之后点击只需要改变css中的边框方向就可以了。

链接: https://fly63.com/tool/detial/49

CSS代码美化工具
CSS3在线样式生成器
CSS3 Flexbox 在线演示
HTML5 标签含义之元素周期表
Animate.css动画演示
Css转换Sass/Less/Stylus在线工具
CSS按钮生成器
网页颜色在线取色器

手机预览