In order to improve the efficiency of front-end development , the author has written hundreds of front-end tools. Some are for internal use by the company, and some are simply because they are too " lazy " to write code, so they are " forced " to do it. A tool of the css triangle generator is also because I wanted to liberate the designer's productivity before, and I was too lazy to cut pictures or write csscode, so after thinking about it, I should make a tool that can automatically generate css triangle code .
Next, I will take you to introduce the purpose and implementation of this tool, so that you can expand more " lazy tools " in the future .
Online css triangle generator preview
From the preview animation, we can see that through online tools we can easily configure all kinds of triangles we want, and can view the csscode in real time . After developing this tool, I don’t have to worry about writing triangle codes anymore. It's possible, it is true that many times just don't want to write code and want to have money) At the end of the article, the author will attach cssthe online address of the tool. Next, let's take a look at the specific implementation process.
Implement css triangle generator
Because the demand for this tool came from the front, so it must be on cssand jshave some basic programming, such as the css3 transform, transitionlayout, box model, borderboundary characteristics.
Like any open source tool that the author wrote before, you must clarify the requirements and goals before developing the project. Here, the author briefly organizes 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 (color, in fact, it doesn't matter if this is actually implemented, mainly because the author is lazy to write this code)
After understanding the requirements, we can roughly draw a simple prototype diagram to represent our cssgenerator interface, as follows:
With the prototype diagram, we can get the following task breakdown diagram:
The point I want to mention here is that the above process is actually applicable to any project, including the intractable problems you encounter. You can clarify the ideas step by step, and disassemble the big goals into small goals, and then one by one. Break it, and the big problem will be solved.
Next, let's analyze cssthe principle of using triangles.
1. The principle of css drawing triangle
In fact, before the author of the article also share with three or more use cssprogram to achieve triangle, where the author describes a general method, which is used borderto achieve triangle, let's look at the following illustration:
These are the shows when box elements widthsmaller than their borderappearance when the width of the box and when the width of zero and border-widthis not the way to zero through a graphical analysis is not very easy to think if I only want one side of the color, the other transparent Can the face become a triangle?
It is indeed achieved in this way. After knowing this principle, we will continue to implement the WYSIWYG "triangle".
2. Editor implementation
Editor implementation is also an old topic of front-end talk. The author wrote a very complicated editor in the H5-Dooring project, but here we only need a static and simple editor. The interface is as follows:
We can use any framework and component library to realize we are good at, such as * vue3+ element plus, react + antd4.0the author here adopt reactprograms to achieve, using the color picker communities more famous react-color.
The author will not introduce the code of the editor interface one by one, I believe everyone can realize it, let's talk about the style data sharing logic:
We want to ensure that the preview area and the CSS code preview area can change in real time with the change of the form value. Here, the form data must be shared. We can use the reactcomponent stateor vuethe vuex(although the data can be upgraded without vuex) to share the state.
3. Preview area implementation
The preview area is actually implemented with the above analysis. It only needs to use the shared formdata to bind to the style of the triangle element. The background of the canvas is also cssimplemented by the author here , as shown below:
You can cv if you are interested, 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;
}
Another key point is how to switch the direction of the triangle. We all know that several direction attributes will change after cssthe direction is switched border. For example, when the direction of the triangle is upward, ours is cssas follows:
{
border-width: 0 60px 60px 100px;
border-color: transparent transparent #06c transparent;
}
When the direction of the triangle is downward, ours is cssas follows:
{
border-width: 100px 60px 0 60px;
border-color: #06c transparent transparent transparent;
}
The same left and right are similar, so we need to maintain 4 styles. If we want to add top left, top right, bottom left, and bottom right later, the code will be very difficult to maintain (not if elsethat switch, to be honest, it is switchonly suitable for judgments of 8 conditions), So the author here uses the object method to solve it, and encapsulates it into 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]
}
In fact, the attribute previews such as width, height, background color are easy to handle, I will not introduce them one by one here. The preview is as follows:
4. Real-time display of code
As for the real-time display of the code in the text box, this is also very easy to implement, we only need to display the obtained data in the text box in real time. Because the author adopts the CSS module and react method to achieve, so we need to add CSS Processing, such as converting the object format to the css specification format, so the following steps need to be added:
JSON.stringify(triangleCss, null, 4).replaceAll(/"/g, '').replaceAll(/,/g, ';')
In this way, a css triangle generator is ready, and you can continue to expand on this basis, such as supporting polygons, hexagons, pentagons, etc., and it is completely fine.
Online experience address: Online css triangle generator
Recently, the H5 editor H5-Dooring has also done a lot of updates and optimizations, and those who are interested can also learn and research.
Relax
Find it useful? Collect it if you like it, by the way, like it, your support is my biggest encouragement! Wechat searched " Interesting Front End " and found more interesting front-end knowledge and actual combat of H5 games, webpack, node, gulp, css3, javascript, nodeJS, canvas data visualization.