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

How to use VUE and Canvas to implement a Thunder Fighter typing game

Today we are going to implement a Thunder Fighter...

What is ZFS? Reasons to use ZFS and its features

History of ZFS The Z File System (ZFS) was develo...

How to use vue-bootstrap-datetimepicker date plugin in vue-cli 3

Demand Background Recently, I plan to use Vue and...

CSS implements a pop-up window effect with a mask layer that can be closed

Pop-up windows are often used in actual developme...

How to use custom tags in html

Custom tags can be used freely in XML files and HT...

An example of the calculation function calc in CSS in website layout

calc is a function in CSS that is used to calcula...

Vue3 Documentation Quick Start

Table of contents 1. Setup 1. The first parameter...

Detailed explanation of jQuery chain calls

Table of contents Chain calls A small case Chain ...

MySQL high availability solution MMM (MySQL multi-master replication manager)

1. Introduction to MMM: MMM stands for Multi-Mast...

Summary of several replication methods for MySQL master-slave replication

Asynchronous replication MySQL replication is asy...

JavaScript implementation of the back to top button example

This article shares the specific code for JavaScr...

Element UI table realizes drop-down filtering function

This article example shares the specific code for...

PostgreSQL materialized view process analysis

This article mainly introduces the process analys...