手撸一个在线css三角形生成器
css代码, 所以想来想去还是自己做一个 能自动生成css三角形代码的工具吧.
在线css三角形生成器预览
css代码. 开发完这个工具之后笔者再也不用担心还需要手写三角形代码了. (上班摸鱼也成了可能, 确实很多时候就是不想写代码还想要有钱拿) 在文末笔者会附上 css工具的在线地址, 接下来我们来看看具体实现流程.
实现css三角形生成器
css和 js编程有一定的基础, 比如css3的 transform, transition, 布局, 盒模型, border边界特性等.
-
生成任何大小的三角形(size) -
生成不同位置的三角形(direction) -
生成不同角度的三角形(rotate) -
生成不同背景色的三角形(color, 其实这个实不实现无所谓, 主要是笔者连这个代码都懒的写)
css生成器界面, 如下:
css实现三角形的原理.
1.css画三角形的原理
css实现三角形的方案, 这里笔者介绍一个通用的方法, 也就是用 border来实现三角形, 我们先来看下面的图示:
width小于自身 border宽度时的样子以及当box宽度为零而 border-width不为零时的样子. 通过图形一分析是不是很容易联想到如果我只要一个边有颜色,其他都为透明面是不是就能变成三角形了呢?
2.编辑器实现
vue3+ element plus, react + antd4.0, 笔者这里采用 react方案实现, 颜色选择器采用社区比较有名的 react-color.
react组件的 state或者 vue的 vuex(虽然不用vuex也可以将data提升)来共享状态.
3. 预览区域实现
form数据来绑定到三角形元素的样式上即可. 画布的背景这里笔者也是用 css实现的, 如下图:
.previewArea {
display: inline-block;
width: 360px;
height: 360px;
background: #eee;
background-image: linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0),
linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
css的 border的几个方向属性都会变, 比如三角形的方向向上时, 我们的 css如下:
{
border-width: 0 60px 60px 100px;
border-color: transparent transparent #06c transparent;
}
css如下:
{
border-width: 100px 60px 0 60px;
border-color: #06c transparent transparent transparent;
}
if else就是 switch, 说实话 switch只适合8个条件一下的判断), 所以笔者这里用对象法来解决它, 并将其封装成一个函数:
const getBorderWidthAndColor = (direction:string, w:number, h:number, color:string) => {
const borderWidthAndColor:any = {
'1': {
borderWidth: `0 ${w/2}px ${h}px ${w/2}px`,
borderColor:`transparent transparent ${color} transparent`
},
'2': {
borderWidth: `${h}px ${w/2}px 0 ${w/2}px`,
borderColor:`${color} transparent transparent transparent`
},
'3': {
borderWidth: `${h/2}px ${w}px ${h/2}px 0`,
borderColor:`transparent ${color} transparent transparent`
},
'4': {
borderWidth: `${h/2}px 0 ${h/2}px ${w}px`,
borderColor:`transparent transparent transparent ${color}`
}
}
return borderWidthAndColor[direction]
}
4. 代码实时展示实现
JSON.stringify(triangleCss, null, 4).replaceAll(/"/g, '').replaceAll(/,/g, ';')
觉得有用 ？喜欢就收藏，顺便点个赞吧，你的支持是我最大的鼓励！微信搜 “ 趣谈前端”，发现更多有趣的H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战.
本文分享自微信公众号 - 趣谈前端（beautifulFront）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
