Create a spindle separator with pure CSS3

Create a spindle separator with pure CSS3

The spindle split line is used to simulate the shadow effect when the paper is cut in the middle, that is, the center is opened and the two sides are closed.

In short, the two sides are small and the middle is large. (Ignore the wow icon in the middle ):

To achieve this effect, use the border-radius and box-shadow attributes.

First, we need a DIV to accommodate the split line.

Next we use the class = mask div to generate the box shadow:

box-shadow: 0 0 8px black;

 

Compare the syntax of box-shadow:

This statement indicates a box shadow with a blur distance of 8 PX and a black color, as shown below:

What we get is a high shadow. Now we need to find a way to narrow it from the middle to the two sides.

Set the border-radius of this element to obtain the radian as follows:

border-radius: 125px/12px;

The preceding Code uses two separate dimensions by a slash to indicate that the horizontal radius of the element's transpose arc is 125px, and the vertical radius is 12px. It is obviously a flat-length elliptical shape.

We can observe that the lower half of the elliptical element is a bit like the spindle we want, but we just need to block the rest.

We put this element in a container and set the container to hide the overflow content (overflow: hidden). The height is a few px smaller than the split line element, and the relative positions of the two are adjusted in detail,

So that the container can block unnecessary parts. However, two elements are required, and their relevance is not obvious, and the code maintainability is not high.

Therefore, we use pseudo elements to make some improvements and set the split line shadow to an element: after pseudo element. The Code is as follows:

.mask {    overflow: hidden;    height: 20px;}.mask:after {    content: '';    display: block;    margin: -25px auto 0;    width: 100%;    height: 25px;    border-radius: 125px/12px;    box-shadow: 0 0 8px black;}

In this way, we get a spindle separator. We can use this separator to isolate the title icon and body.