Use CSS to draw a file upload pattern

As shown below, if it were you, how would you achieve it:

Usually we use font icons to display the plus sign in the middle, and wrap it with a div on the outside; or use pseudo-elements to simulate the horizontal and vertical lines in the middle, which is more troublesome.

In fact, we can directly use div+css to achieve it.

Outline

The outline property is a shorthand property for setting one or more individual outline properties, for example.

A contour has the following properties:

{
    outline-style: solid;
    outline-width: 10px;
    outline-color: red;
}

They have a shorthand form:

{
    outline: 10px solid red;
}

Features of the outline

Outlines do not take up space; they are drawn on top of the content.

You can achieve the following effect:

I found that when setting outline-offset to a negative value, the outline will appear inside the div. If you continue to expand its negative value, the outline will eventually shrink into a "➕" plus sign, which can be used as the plus sign in the middle of the file upload style.

This is interesting, so here comes the code:

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    outline: 15px solid #545454;
    outline-offset: -66px;
    border: 2px solid #545454;
}

outline-offset: -66px; is the key, it represents the distance of the outline from the edge of the div. If it is a negative value, it will shrink inwards, finally forming a plus sign. The specific uploaded style size and outline width need to be adjusted slowly by yourself to achieve harmony.

It should be noted that:

The container must be a square

The width of the outline border itself cannot be too small

Original github repository address: https://github.com/Daotin/front-end-notes/issues

Summarize

The above is what I introduced to you about using CSS to draw a file upload pattern. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!