为了提高前端开发效率，作者写了上百个前端工具，有的是公司内部用的，有的只是因为自己“懒”了写代码，所以我是“被迫”去做的。下一个要介绍的工具——css三角形生成器，也是因为之前想解放设计师的生产力，懒得切图，懒得写css代码，所以想来想去，还是自己做了一个可以的工具自动生成css三角形代码。接下来笔者将介绍这个工具的用途和实现方式，方便大家以后扩展更多的“懒人工具”。在线css三角形生成器预览预览动画中我们可以看到，我们可以通过在线工具轻松配置各种我们想要的三角形，并且可以实时查看css代码。开发了这个工具后，我再也不用为需要手写三角代码而烦恼了。（上班钓鱼也变成Maybe了，确实，很多时候就是不想写代码，只想捞钱）文末笔者附上css工具的在线地址。接下来，我们来看看具体的实现过程。css三角形生成器的实现是因为这个工具的需求来自Front-end，所以必须要有一定的css和js编程基础，比如transform，transition，layout，boxmodel，css3的border特性等.和笔者之前写的任何一个开源工具一样，一定要明确需求和目标，这里我简单梳理一下需求：生成任意大小（size）的三角形生成不同位置（方向）的三角形生成不同角度的三角形(rotate)生成背景颜色不同的三角形（color，其实这个是不可以的没关系，主要是作者懒得写这段代码）了解需求后，我们可以大致画出一个简单的原型图来表示我们的css生成器界面，如下：有了原型图，我们可以得到如下的任务分解图：这里要提的一点是，上面的过程是一个实际上适用于任何项目，包括你遇到的难题。可以一步步理清思路，把大目标分解成小目标，再一个一个突破，这样大问题就迎刃而解了。下面我们来分析一下利用css实现三角形的原理。1、css绘制三角形的原理。其实笔者在上一篇文章中也分享了3种以上的使用css实现三角形的方法。scheme，这里笔者介绍一种通用的方法，就是使用border实现三角形，我们先看下图：上图是当box元素的宽度小于自身border宽度时的样子和当box的宽度为0且border-width为不为零。通过图1在分析中是不是很容易想到，如果我只需要一边着色，其他边透明，是不是可以变成三角形呢？确实是这样实现的。知道了这个原理之后，我们继续实现所见即所得2.编辑器实现编辑器实现也是前端长期讨论的话题。作者在H5-Dooring项目中写了一个非常复杂的编辑器，但是这里我们只需要一个静态简单的编辑器就足够了。界面如下图：我们可以使用自己擅长的任何框架和组件库来实现，比如vue3+elementplus，react+antd4.0，笔者这里使用的是react方案，颜色选择器采用的是社区中比较有名的react-color的代码。编辑器界面就不一一介绍了。我相信每个人都能体会到。这里先说一下样式数据共享逻辑：我们要保证预览区和css代码预览区可以随着表单值的变化实时变化，这里必须共享表单数据，我们可以使用react组件的state或者vue的vuex（虽然没有vuex也可以提升数据）共享state。3.预览区的实现预览区的实现其实有上面的分析其实很容易实现。您只需要使用共享表单数据绑定到三角形元素的样式即可。画布的背景也是用CSS实现的，如下图：有兴趣的可以cv一下。代码如下：.previewArea{display:inline-block;width:px;height:360px;背景：#eee;背景图像：线性渐变（45deg，rgba（0,0,0,.2）25％，transparent0，transparent75％，rgba（0,0,0,.2）0），线性渐变(45deg,rgba(0,0,0,.2)25%,transparent0,transparent75%,rgba(0,0,0,.2)0);背景大小:30px30px;背景位置:00,15px15px;}另一个关键点是如何切换三角形的方向。我们都知道CSS边框的几个方向属性在方向切换后会发生变化。比如当三角形的方向是向上的时候，我们的css是这样的：{border-width:060px60px100px;border-color:transparenttransparent#06ctransparent;}当三角形的方向是向下的时候，我们的css是这样的：{border-width:100px60px060px;border-color:#06ctransparenttransparenttransparent;}左右也差不多，所以我们要保持这4个样式。如果我们后面要加上左上、右上、左下、右下，代码会很难维护（要么ifelse，要么switch，说实话，switch只适合8个条件判断），所以作者这里使用对象的方法来解决，封装成一个函数：constgetBorderWidthAndColor=(direction:string,w:number,h:number,color:string)=>{constborderWidthAndColor:any={'1':{borderWidth:`0${w/2}px${h}px${w/2}px`,borderColor:`transparenttransparent${color}transparent`},'2':{borderWidth:`${h}px${w/2}px0${w/2}px`,borderColor:`${color}透明透明transparent`},'3':{borderWidth:`${h/2}px${w}px${h/2}px0`,borderColor:`transparent${color}transparenttransparent`},'4':{borderWidth:`${h/2}px0${h/2}px${w}px`,borderColor:`transparenttransparenttransparent${color}`}}returnborderWidthAndColor[direction]}其实就是预览width,height等属性，背景色这些都好办，这里就不一一介绍了。预览如下：4.代码的实时显示至于文本框中代码的实时显示，这个也很容易实现。我们只需要将获取到的数据实时显示在文本框中，放入框中即可。由于实现了作者使用的css模块和react方法，需要对css进行额外的处理，比如将对象格式转换为css规范格式，所以需要增加如下步骤：JSON.stringify(triangleCss,null,4).replaceAll(/"/g,'').replaceAll(/,/g,';')这样一个css三角形生成器就做好了，可以在此基础上继续扩展，比如作为支持polygons,Hexagon,?Pentagon等，也完全没问题。在线体验地址：Onlinecsstrianglegenerator最近H5编辑器H5-Dooring也做了很多更新和优化，有兴趣的也可以学习一下与研究。本文转载自微信?“趣话前端”，可关注以下二维码，转载请联系前端?。
