The border attribute is an attribute that is frequently used in practical applications. In addition to being used as a border, some common effects (such as contour layout, scrolling layout of fixed content up and down, drawing CSS ICONS, etc.) can be achieved by using some features and presentation modes of the border attribute. Some more complex effects can be achieved with cSS3’s new property values, such as padding borders with images.

This article will not introduce the basic application method of the border attribute, but will directly introduce how to achieve some common effects through the border attribute.

Draw polygons such as triangles and trapezoids using border

In the CSS, common plane graphics are rectangles and circles. But there are inevitably situations where we need to use CSS to draw triangles, trapezoids and paralleling quadrangles. At this point we can use some of the rendering characteristics of the border to achieve this functionality. Here’s how to get a triangle step by step. First we’ll write a div that looks like this

 .border {
     width: 200px;   
     height: 100px;   
     margin: 0 auto;   
     border-top: 40px solid red;   
     border-bottom: 40px solid green;   
     border-left: 40px solid yellow;   
     border-right: 40px solid blue;   
 }Copy the code

The browser renders as follows:

We found that by using different colors for the four borders of a div, it rendered as a border of four trapezoids. If we define height to be 0, the render will look like this:

If we set the width to 0 again, the result is as follows:

So far, by comparing the different styles defined above, we have found that in CSS, the border is actually rendered in trapezoid form (this may be related to the property values of groove and other 3D effects, but the details are not further studied). When the width and height of the elements are zero, they become four triangles squeezed together. Therefore, we can imagine that if we define the color of three of the borders as transparent, and then wrap it around an outer container and set Overflow: Hidden to the outer container, we will get an isosceles trapezoid or triangle. Now let’s change the CSS as follows:

 .trapezoid {
     width: 200px;   
     height: 0;      
     border-top: none;   
     border-bottom: 60px solid #249ff1;   
     border-left: 40px solid transparent;   
     border-right: 40px solid transparen;   
 }Copy the code

We will get the following trapezoid:

Set the style to the following:

 .triangle {
     width: 0;
     height: 0;
     border-top: 0 solid transparent;
     border-bottom: 100px solid #249ff1;
     border-left: 100px solid transparent;
     border-right: 100px solid transparent;
 }Copy the code

We will get the following triangle:

Because all of the 2 d polygons can be divided into multiple of triangles, and this forms the basis of the border, we can set different border width value, color, and lend a pseudo element or multiple elements of joining together can realize some more complex graphics, in theory, we can use CSS to draw any polygon. Like polypointed stars, diamonds, and chat bubbles. Here are some examples

Use border to achieve the left and right columns of contour layout

In actual projects, I often have the requirement of left-right two-column layout, such as the left menu bar area of background management and the content area on the right as well as the layout similar to jd classification navigation, as shown in the picture below.

There are many solutions to this layout, such as using padding and margin to cancel each other out. But if you use border, you can probably make CSS more concise, more applicable, and more compatible. For example, for the effect of the first image, we have the following HTML structure.

<div class="menu">
    <ul>
        <li>Home page</li>
        <li>Commodity management</li>
        <li>Marketing center</li>
        <li>Member management</li>
        <li>System Settings</li>
    </ul>
</div>
<div class="content">Here is the content area</div>Copy the code

And the following main CSS:

.menu {
    float: left;
    width: 200px;
    color:  #FFF;
}
.content {
    border-left:  200px solid #40403b;/* Here is the main style */
    padding: 20px;
    height: 1000px; /* This represents the content area */
}Copy the code

Since the border width does not support percentage values, the disadvantage of this approach is that it is difficult to directly scale the left and right side widths.

Use border to achieve fixed layout of mobile terminal

In mobile applications, the head and bottom of the page are fixed, and the middle content area is scrolled is a common layout, as shown in the figure below.

There are also a variety of implementation methods to achieve this layout, generally using the upper and lower fixed positioning (fixed positioning on the mobile terminal will have the problem of the dislocation of the keyboard and the use of transform, which will be analyzed in another article), and then with the help of margin and padding. But if the use of border to achieve not only simple code, high compatibility. The core style is to add a transparent top and bottom border to the content area, with the width of the top border equal to the height of the head and the width of the bottom border equal to the height of the step. As follows:

header.footer {
    position: fixed;
    width: 100%;
    line-height: 50px;
    color: #FFF;
    background: #249ff1;
    text-align: center;
}
header {
    top: 0;
    left: 0;
}
footer {
    bottom: 0;
    left: 0;
}
.container {
    padding: 20px;
    background: #f3f3f3;
    height: 1000px; /* this represents the content */
    border-top: 50px solid transparent;/* Top border width is equal to header height */
    border-bottom: 50px solid transparent;/* The bottom border width is equal to the footer height */
}Copy the code

Using this method, we can also achieve the location of the background, such as the lower right corner and the upper left corner of the watermark when adding the image.

Border-color use skills

Since the border color value is equal to the label’s font color value when the color is not specified, we can use this feature to do some effects. For example, for a label with a border, the border and font color are gray in normal state and blue when the mouse moves over it, as follows:

Normally, we would use a dummy element to write the plus sign inside, and change the border color, font color, and background color of the dummy element at the same time, but with this property, we only need to change the font color of the A tag. Here’s the code.

a {
    position: relative;
    display: inline-block;
    padding: 30px 20px;
    color: #a7a7a7;
    border: 1px solid;
}
a:hover {
    color: #249ff1;
}
a:before.a:after {
    content: ' ';
    display: block;
}
a:after {
    border-top: 2px solid;
    width: 20px;
}
a:before {
    position: absolute;
    top:  20px;
    left:  29px;
    border-left: 2px solid;
    height: 20px;
}Copy the code

Implement an adaptive triangle

Sometimes there is a need for adaptive triangle effects, like the one below. This is a registration page, design requirements for: the registration page at the top of the two identity selection for two gray background rectangles, width adaptive. A pentagon on a blue background when you select one of the identities.

This requirement can be implemented using SVG or the CLIp-path property of CSS3, but what if we want to implement it using border?

We split UI elements, and there are a number of ways to split them and it’s natural to split the active shapes into a rectangle at the top and an isosceles triangle at the bottom. This allows you to define CSS styles with pseudo-elements and border triangles. The problem is that since the widths of the two tabs are adaptive, the border widths need to be adaptive as well, while the border widths do not support percentages. ?? How to do? At this time we think of the first method naturally will be using JS dynamic calculation, but not without the help of JS dynamic calculation there is no way? We can draw a graph and analyze it.

Assuming that the rectangular region formed by the split triangle is the parent element (the blue part in the figure), and the actual triangle is the child element or pseudo-element positioned relative to the element (pseudo-element is selected here, the red-blue cross part in the figure), then we only need a div for the label. When we want the triangle to adapt to the rectangle, the ideal state should be the red and blue intersection of the diagram (triangle with top border + transparent left and right border). Since border-width does not support percentage values, let’s first give the border width a large enough value to be positioned as the red triangle in the figure. For the overflow part, we do overflow:hidden in the parent, and an adaptive triangle is implemented. All that remains is how to locate and set the value. We assume that the width of the parent level is A, the height is B, the border-top of the triangle is Y, and the border-left and border-right are X. Before positioning, point A should coincide with point B. After positioning, the relative position of point A and point B is (-(x-0.5A), -(y-b)). X and y are fixed values, and A and B are percentages. CSS must be calculated to locate the value. CSS3 calC property can be used to solve this problem, but there may be compatibility problems. If we can position point A relative to the midpoints of C and D, then the relative position becomes (-x,-y), and the problem is solved. Let’s change the picture as follows:

If we set the parent height to 0, use the padding-top to offset the height, use the padding-left to offset the width to 0.5a, and use the padding-left to offset the other 0.5 A, then point A is positioned relative to point P (P is now the upper left corner of the content area). Now, the position of A with respect to P is (-x,-y). At this point, you can implement a responsive triangle with the following styles. (Pay attention to the ratio of border-left and border-top, which can be calculated according to similar triangle features.)

<div></div>Copy the code
div {
    width: 40%;
    padding-top: 8%;
    padding-left: 40%;/* Width/height ratio is 10:1*/
    overflow: hidden;
    border: 1px solid red;/* For easy observation */
}
div:after {
    content:  ' ';
    display: block;
    width: 0;
    height: 0;
    border-left: 1500px solid transparent;/* Large enough border width */
    border-right: 1500px solid transparent;/* Large enough border width */
    border-top: 300px solid #249ff1;/* The width/height ratio is 10:1, i.e. (1500+1500) : 300*/
    /* Position (-x,-y) */
    margin-top: -300px;
    margin-left: -1500px;
}Copy the code

The effect is as follows:

With this method, you can implement the registration page Tab design above. At the same time, by adjusting each parameter, you can also achieve various types of triangles. Suppose the isosceles triangle to be defined has base 2X and height y, and the parent needs width 2A and height B. Then the relationship between each value is as follows:

border-left = border-right = x = -margin-left; border-top / padding-top = x / a; margin-top = -border-top; The value of border-left can be set to a large value as required. The border-top is related to the shape of the triangle, that is, the ratio between A and BCopy the code

The above are some characteristics and practical application of border attribute. More characteristics and application scenarios will be updated in the future. Let me write that for a moment.