In order to improve the efficiency of front-end development, I have written hundreds of front-end tools, some for internal use, some simply because I was too lazy to write code and “forced” to do so. The next introduction of a tool – CSS triangle generator is also because before want to liberate the productivity of designers, they are too lazy to cut or write CSS code, so I want to do a tool that can automatically generate CSS triangle code.

Next, THE author will take you to introduce the use and implementation of this tool, so that you can expand more “lazy tool”.

Online CSS triangle generator preview

From the preview animation we can see that we can easily configure any triangles we want using the online tool and view them in real timecssCode. After developing this tool, I don’t have to worry about writing triangle code by hand anymorecssThe online address of the tool, let’s look at the implementation process.

Implement the CSS triangle generator

Because the requirements of this tool come from the front end, it must have some basic knowledge of CSS and JS programming, such as CSS3 transform, Transition, layout, box model, border feature, etc.

As with any open source tool I’ve written before, it’s important to know your requirements and goals before you start a project. Here are some of the requirements:

  • Generate triangles of any size (size)
  • Generate triangles in different positions (direction)
  • Generate triangles with different angles (Rotate)
  • Generate triangles with different background colors.

Once we understand the requirements we can draw a simple prototype diagram to represent ourcssGenerator interface, as follows:

With the prototype diagram, we can get the following task breakdown diagram:

The point I would like to mention here is that the above process is applicable to any project, including the difficult problems you encounter, you can first clarify the idea step by step, break down the big goals into pieces of small goals, and then break them down one by one, so that the big problems can be solved.

Let’s first look at how triangles are implemented with CSS.

1. How to draw triangles in CSS

In fact, I have shared more than 3 uses in previous articlescssThe realization of the triangle scheme, here the author introduces a general method, that is, withborderTo implement a triangle, let’s look at the following diagram:So that’s the box elementwidthLess than their ownborderWidth and when box width is zeroborder-widthIt’s not zero. Is it easy to think from graph 1 that if I only want one side to be colored and all the other sides to be transparent, I can make a triangle?

That’s exactly how it works, and with that in mind let’s move on to the WYSIWYG triangle.

2. Editor implementation

Editor implementation is also the front end of the topic, the author inH5-DooringA very complex editor was written in the project, but a static and simple editor is all we need here. The interface as shown below:We can use any framework and component library we are good at, such asvue3+ element plus.The react + antd4.0, the author adopted herereactScheme implementation, color selector used by the community is more famousreact-color.

Editor interface code is not introduced, I believe everyone can achieve, let’s talk about the style data sharing logic:

To ensure that the preview area and the CSS preview area change in real time with the value of the form, it is important to share the form data. We can use the React component’s state or vue’s vuex to share the state (although we can promote data without vuex).

3. Preview area implementation

The preview area implementation is actually very easy to implement with the above analysis, just use the sharedformData to bind to the style of the triangle element. The north background of the canvas is also used by the author herecssAs shown in the figure below:

If you are interested, you can CV it. The code is as follows:

.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;
}
Copy the code

Another key point is how to switch the direction of the triangle. As we all know, several direction properties of the CSS border will change after switching the direction. For example, when the direction of the triangle is up, our CSS is as follows:

{
  border-width: 0 60px 60px 100px;
  border-color: transparent transparent #06c transparent;
}
Copy the code

When the triangle is pointing down, our CSS looks like this:

{
  border-width: 100px 60px 0 60px;
  border-color: #06c transparent transparent transparent;
}
Copy the code

The left and right are also similar, so we need to maintain the style in 4, if we want to add left up, right up, left down, right down, this code will be very difficult to maintain (either if else or switch, to tell the truth, switch is only suitable for 8 conditions of judgment), so the author uses the object method to solve it. And encapsulate it as a function:

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]
  }
Copy the code

In fact, attribute preview such as width, height, background color these are easy to deal with, I will not introduce here. Preview as follows:

4. Real-time display of code implementation

As for the code real-time display in the text box, this is also easy to achieve, we just need to get the data real-time display in the text box. Because the author adopts THE CSS Module and React method to implement, additional processing of CSS is needed, such as converting the object format to the CSS standard format, so the following steps are needed:

JSON.stringify(triangleCss, null.4).replaceAll(/"/g.' ').replaceAll(/,/g.'; ')
Copy the code

In this way, a CSS triangle generator is ready, and you can continue to expand on this basis, such as support for polygons, hexagons, ⭐ pentagons, etc., is also perfectly fine.

Online experience address: online CSS triangle generator

The H5 editor H5-Dooring has also been updated and optimized for those interested.

Think it works? Like to collect, by the way point like it, your support is my biggest encouragement! Wechat search “interesting talk front-end”, found more interesting H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and actual combat.