This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

preface

To make some irregular shapes in CSS, we can use various methods. For example, the most common use of border to draw triangles, or CSS to draw polygons magic clip-path, the following effect

All it takes is one line of code.

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)
Copy the code

For more information, please refer to this website: bennettfeely.com/clippy/, but Ben… .

outline

Outline sets the outline around the border of the element. You can also set the outline’s color, outline width, and outline style. The syntax is similar to border

Border and outline are similar, but have the following differences:

  • The outline does not take up space and is drawn around the element content.
  • According to the specification, outline is usually a rectangle, but can also be non-rectangular.

Irregular border

< span > I am outline < br / > < br / > I can create a rectangle frame < / span > span {the outline: 1 px dashed red; }Copy the code

Bilateral box

Here set the outline-style to double, then offset the outline by 5px when you

  outline: 12px double rgb(241, 130, 130);
  outline-offset: 5px;
Copy the code

If offset is set to negative, the contour is offset inward.

Outline -style:dotted outline

What’s the idea? First, use outline-style:dotted, the plot of the points, let him half outside the element, generally inside the element. That’s OK

Here we set the width and height of the element to 200px, then set the width of the outline to 40px and set the inner offset to 20px, so there will be 4 balls on one side.

 .outline-double {
        background-color: #80f0f0;
        outline: 40px dotted rgb(255, 1, 1);
        outline-offset: -20px;
        
      }
Copy the code

Then change the color to white: outline: 40px dotted white; Scratch it and you get it.

Poly 2

Above, we used dotted to realize Yuan Hua’s polygon. How to realize all the straight edges? outline-style:dashed.

When the color is set to white, it looks like this:

conclusion

Outline has other interesting property values that are not used much, but can be used occasionally instead of border, a CSS property that is not necessarily limited to one scene!!

If you do not know the outline, please see this “Border’s little brother irregular outline”.