Implementation of CSS border length control function

Implementation of CSS border length control function

In the past, when I needed the border length to be smaller than the container, I used div nesting. Later I found that pseudo-classes are very convenient for achieving this effect. Only one div is enough, and adjusting padding and margin is not troublesome.

<div class="content-block">
<div class="box-container">
<div class="border-top">border top</div>
</div>
<div class="box-container">
<div class="border-left">border left</div>
</div>
<div class="box-container">
<div class="border-right">border right</div>
</div>
<div class="box-container">
<div class="border-bottom">border bottom</div>
</div>
</div>
.box-container {
    position: relative;
    width: 90%;
    color: #777;
}
.border-top {
    background: #b4bcbf;
    padding: 15px;
}
    .border-top:before {
        content: '';
        position: absolute;
        left: 42%;
        top: 0;
        bottom: auto;
        right: auto;
        height: 7px;
        width: 50%;
        background-color: #8796a9;
    }
.border-left {
    background: #dfdad6;
    padding: 15px;
}
    .border-left:before {
        content: '';
        position: absolute;
        left: 0;
        top: 6%;
        bottom: auto;
        right: auto;
        height: 52%;
        width: 5px;
        background-color: #a89d9e;
    }
.border-right {
    background: #eee9c4;
    padding: 15px;
}
    .border-right:after {
        content: '';
        position: absolute;
        left: auto;
        top:auto;
        bottom: 5px;
        right: 0;
        height: 52%;
        width: 5px;
        background-color: #f39c81;
    }
.border-bottom {
    background: #bcdc9d;
    padding: 15px;
}
    .border-bottom:after {
        content: '';
        position: absolute;
        left: 18px;
        top:auto;
        bottom: 0;
        right: auto;
        height: 6px;
        width: 105px;
        background-color: #32b66b;
    }

The effect is as follows:

Summarize

The above is the implementation of the CSS border length control function introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor 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!

<<:  Design Reference Beautiful and Original Blog Design

>>:  Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 1)

Recommend

Detailed tutorial on deploying apollo with docker

1. Introduction I won’t go into details about apo...

An example of elegantly writing status labels in Vue background

Table of contents Preface optimization Extract va...

Detailed explanation of the difference between $router and $route in Vue

We usually use routing in vue projects, and vue-r...

Implementation of Docker deployment of Django+Mysql+Redis+Gunicorn+Nginx

I. Introduction Docker technology is very popular...

Some references about colors in HTML

In HTML, colors are represented in two ways. One i...

The difference and usage between div and span

Table of contents 1. Differences and characterist...

Detailed explanation of EXT series file system formats in Linux

Linux File System Common hard disks are shown in ...

Docker custom network implementation

Table of contents 1. Customize the network to rea...

js canvas realizes rounded corners picture

This article shares the specific code of js canva...