Let's talk about some interesting CSS topics (1)--How to implement the vertical bar on the left

Start this series and discuss some interesting CSS topics. Putting aside practicality, some topics are designed to broaden the ideas for solving problems. In addition, they involve some CSS details that are easily overlooked.

Compatibility is not taken into account when solving problems. The questions are wild and wild. Just say whatever comes to mind. If there are CSS properties that you feel are unfamiliar in the problem solving, go and study them quickly.

Keep updating, keep updating, keep updating, say important things three times.

Collect it in my Github and post it to the blog in the hope of getting more solutions.

Question 1. How many ways can the following graphic be implemented using only one label:

Suppose our single label is a div:

<div></div>

is defined as follows universal CSS:

div{
    position:relative;
    width:200px;
    height:60px;
    background:#ddd;
}

Method 1: border

This should be the easiest to think of

div{
    border-left:5px solid deeppink;
}

Method 2: Use pseudo elements

A label, counting the before and after pseudo-elements, actually counts as three labels. This is also the basis for many single-label drawings. In this question, it can be easily completed using pseudo-elements.

div::after{
    content:"";
    width:5px;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background:deeppink;
}

Method 3: Outer box-shadow

Box-shadow box-shadow Most people just use generated shadows. In fact, shadows can have multiple shadows, and shadows cannot be blurred. This requires understanding the specific functions of each parameter of box-shaodw . Use box-shaodw to solve problems

div{
    box-shadow:-5px 0px 0 0 deeppink;
}

Method 4: Inner box-shadow

The box shadow also has a parameter inset, which is used to set the inner shadow. It can also be done:

div{
    box-shadow:inset 5px 0px 0 0 deeppink;
}

Method 5: drop-shadow

drop-shadow is one of the new filters filter in CSS3. It can also generate shadows, but it only has 3 numerical parameters, one less than box-shadow.

div{
    filter:drop-shadow(-5px 0 0 deeppink);
}

Method 6: Gradient linearGradient

Flexible use of CSS3 gradients can create a large number of unexpected graphics. CSS3 gradients are divided into linear gradients and radial gradients. This question uses linear gradients and can be easily solved:

div{
    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}

Method 7: outline

This is rarely used. Outline is a line drawn around an element. It is located outside the edge of the border and can highlight the element. This method is considered the next best option.

div{
    height:50px;
    outline:5px solid deeppink;
}
div{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

F8, scroll bar

This method is provided by Little Match’s Blue Ideal and is implemented by changing the scroll bar style:

div{
    width:205px;
    background:deeppink;
    overflow-y:scroll;
}
div::-webkit-scrollbar{
    width: 200px;
    background-color:#ddd;
}

Practicality aside, if you just simulate this style, this method is really eye-catching.

　

The above are the 8 methods that come to mind. I don’t rule out that there are some that I haven’t thought of. I hope there are other methods that can be put forward in the comments. You can click here to see the specific 8 implementations:

codepen-How to implement the vertical bar on the left side of a single label

All the questions are summarized in my Github and posted to the blog in the hope of getting more solutions.

This is the end of this article. If you still have any questions or suggestions, you can communicate more. It is an original article. The writing style is limited and the knowledge is shallow. If there is anything wrong in the article, please let me know.