返回免费在线工具集合

CSS 三角形生成器

选择方向与底边尺寸,生成纯 CSS 三角形代码,支持等腰与直角三角形。

设计 独立定制 输出:网页 免费使用 发布时间: 阅读量:6 作者:马慧
正在加载工具…

朝上就选上箭头

重庆渝中"解放碑气泡组件"的谭析,要给气泡做一枚指向上方的尖角。"方向"是个下拉,八个候选里他挑的是"上 ↑",气泡往哪边指,尖角就得朝哪边。控件一换,只读框里那几行 border 当场重写,不用再找确认键。

方向选「上 ↑」

80 怎么变成 40

"底边宽"拨到 80、"高"拨到 60,"颜色"取 #2f6bff。源码里 lw = w.get()/2 先把宽度折半,于是结果里左右两条透明边各是 40px,不是 80px;"高"的 60 直接落在着色那条边上。谭析要的蓝是 #2f6bff,只出现在 border-bottom。

底边宽 80、高 60

框里读 border 三行

结果写在标签"复制 CSS"下面的框里,能选中拷走,字却改不动。整段先给 width 与 height 清零,中间是两条 40px 的透明左右边,末行是 60px 的蓝色 border-bottom。谭析翻过 .zab-result,那里这回什么也没给,找结果得认准这个框。旁边按钮叫"复制代码",别和标签混了。

看「复制 CSS」框里的 border 写法

预览里确认尖角

.zab-preview 画出来的正是朝上的蓝三角,和框里那几行是同一份值,拖滑块时两边一起动。确认尖角朝上之后点"复制代码"带走,按钮短时换成"已复制",页面没有下载入口,产物就是剪贴板里那段样式。这次只测了"上 ↑"一种朝向,其余七项没逐个换过去看。

看预览区的三角形

企业知识网( www.qiyezhishi.com )提供的结果为参考性内容,不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。

本文作者

马慧,企业知识网站长,10年+SEO/GEO经验,精通白帽SEO与网站优化,擅长全网营销与短视频引流,曾打造日均万IP的SEO博客(小小课堂网)、十万IP泛流量资讯网站(错误博客)。自川来熟食连锁店长,5年熟食生产与管理经验,精通抖音本地生活服务运营。