使用CSS创建互锁的不规则边框 [英] Creating interlocking, irregular borders with CSS

问题描述

我的布局由4个互锁"的div组成，如下所示:

I have a layout made up of 4 "interlocking" divs, like so:

-------**********
-     -*        *
-     -*        *
-     -*        *
-------         *
++++++ *        *
+    + *        *
+    + **********
+    + ^^^^^^^^^^
+    + ^        ^
+    + ^        ^
+    + ^        ^
+    + ^        ^
++++++ ^^^^^^^^^^

我想在顶部"和底部"位置周围放置边框，以使最终布局看起来像这样:

I want to put borders around the "top" and "bottom" bits, to have the final layout look like:

-------**********
-               *
-               *
-               *
-------         *
++++++ *        *
+    + *        *
+    + **********
+    +^^^^^^^^^^^
+               ^
+               ^
+               ^
+               ^
++++++^^^^^^^^^^^

(用于相遇的两个div应该是看起来像一个统一形状的平滑边框)

(Where two divs used to meet should be a smooth border that looks like one unified shape)

我应该如何在CSS中正确执行此操作?

How should I do this properly in CSS?

推荐答案

这是我的解决方案.它使用具有负边距的浮点数，并通过将边框设置为div的背景色来伪造无边界部分.

Here's my solution. It uses floats with a negative margin and fakes the no-border part by setting the border to the background color of the div.

.w {width:223px;}
.box {float:left;height:100px;width:100px;border:1px solid #000;margin-bottom:10px;}
.tall {height: 300px;}
.wide {width:120px;}
.right {position:relative;z-index:1;float:right;margin-left:-1px;}
.no_rb {border-right:1px solid #fff;position:relative;z-index:10;}
.no_lb {border-left:1px solid #fff;position:relative;z-index:10;}

<div class="w">
    <div class="box wide no_rb"></div>
    <div class="box tall right"></div>
    <div class="box tall"></div>
    <div class="box right wide no_lb"></div>
</div>

这篇关于使用CSS创建互锁的不规则边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！