Merge borders in the middle of three divs on CSS
CSS Merge Borders Between Three Divs
In web development, you often need to arrange multiple elements and have borders between them. Sometimes, you might want to merge borders between these elements, rather than simply displaying them at the edges. This article will detail how to achieve this effect using CSS.
Implementation Strategy
To achieve a merged border between three divs, you can use pseudo-elements to simulate the effect of merged borders. The idea is to create a parent container and then add a pseudo-element to the right and bottom of each child element to create a merged border effect.
Sample Code
The following is a sample code that demonstrates how to use CSS to implement a merged border around three divs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Divs with Merged Borders</title>
<style>
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
.box:after {
content: "";
position: absolute;
top: 0;
right: -2px;
width: 1px;
height: 100%;
background: black;
}
.box:last-child:after {
display: none;
} .box::before {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: black;
}
.box:nth-child(3):before {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
In the example code above, we create a container containing three divs and arrange them horizontally using Flex layout. Each div has a 1px black border, and the pseudo elements :before and :after are used to simulate the collapsing effect of the borders.
We used display: flex; on the parent container .container so that the child elements would automatically align as desired.
On each child .box element, we set a width and height of 100px and added a 1px black border. To achieve the border collapse effect, we used relative positioning position: relative; on each .box element and added the :before and :after pseudo-elements.
The :after pseudo-element simulates the effect of a vertical border by setting its position: absolute; and setting top: 0; right: -2px; width: 1px; height: 100%;, respectively.
The :before pseudo-element simulates the effect of a horizontal border and also uses position: absolute; to set its position, achieved via bottom: -2px; left: 0; width: 100%; height: 1px;.
Finally, we use the :last-child and :nth-child() selectors to control the display of the right border of the last .box element and the bottom border of the third .box element, thereby achieving the effect of merged borders.
Running Results
When we run the above sample code in a browser, we can see that the borders between the three divs are merged, and the center borders are not repeated, creating a clear separation effect.
Through the above implementation ideas and sample code, we have successfully achieved the merged center border effect of the three divs, bringing a more beautiful and elegant effect to the web page layout.