Design a triangle pattern with CSS

 In traditional web design, adding a triangle pattern to a web page must use a pattern design method to add, that is, first draw a triangle with a drawing software, and then add it to the web page. In addition to designing time, the file must be uploaded to the server. The follow-up maintenance is also more troublesome. The emergence of CSS has changed this traditional design method, allowing web designers to use CSS syntax to design the desired triangle directly. As long as the CSS code is written, the triangle can be displayed. The colors and proportions are very simple, the advantages of using CSS to design triangle patterns are much better than traditional design methods, and the syntax is very simple, which is also the fun part of CSS.

Design concept

with a CSS design will be used is triangular pattern element border ( border ) design concept, the elements have a four borders, each border is rendered between 45 degree angle, so that the lower sub-image presentation.

We use this feature to make the border of one side disappear, the two symmetrical sides are set to the same color, and the remaining one side is set to the color and length to be displayed, and the triangle we want will be displayed. The following practical operation example can See it more clearly.

Use CSS to design practical examples of triangle patterns

<style>
#T1 {
border-right: 15px solid white;
border-left: 15px solid white;
border-bottom: 25px solid blue;
display:inline-block;
}
#T2 {
border-top: 15px solid white;
border- bottom: 15px solid white;
border-left: 25px solid blue;
display:inline-block;
}
#T3 {
border-right: 15px solid white;
border-left: 15px solid white;
border-top: 25px solid blue;
display: inline-block;
}
#T4 {
border-top: 15px solid white;
border-bottom: 15px solid white;
border-right: 25px solid blue;
display:inline-block;
}
</style>
<div id="T1" ></div>
<div id="T2"></div>
<div id="T3"></div>
<div id="T4"></div>

Example output effect

A total of four triangles are prepared in the example, which are an upward triangle, a right triangle, a downward triangle, and a left triangle. From the CSS grammar of the example, readers can clearly see the side that is less written. It is the tip of the triangle. Because the grammar is not written out, the browser automatically treats that side as borderless. If you want to modify the shape of the triangle, you can make it a little longer or shorter. Just adjust the length of the bottom border. , Try to modify it yourself.