Создание взаимосвязанных, нерегулярных границ с помощью CSS - PullRequest
Новая
       9

Создание взаимосвязанных, нерегулярных границ с помощью CSS

4 голосов
/ 10 июля 2009

У меня есть макет, состоящий из 4-х "взаимосвязанных" div, вот так: 

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

Я хочу поместить границы вокруг «верхних» и «нижних» битов, чтобы окончательный вид выглядел следующим образом: 

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

(Там, где встречаются два элемента div, должна быть гладкая граница, которая выглядит как одна единая фигура)

Как мне сделать это правильно в CSS?

Ответы [ 5 ]

4 голосов
/ 10 июля 2009

Вот мое решение. Он использует поплавки с отрицательным полем и подделывает часть без границ, устанавливая границу в цвет фона 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>
3 голосов
/ 10 июля 2009

Вы можете сделать это 1px границы и 1px перекрытия абсолютных позиционных делителей. иметь меньший из div для данного пересечения не иметь границы, и сделать так, чтобы он перекрывал границу большего div.

Редактировать: Кроме того, меньший div должен иметь более высокий z-индекс, чтобы он располагался сверху.

0 голосов
/ 10 июля 2009

Попробуйте это. Использование только чисел с плавающей точкой, отрицательных полей и z-индекса. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Interlock test</title>
        <style>
            div { width:150px; border:1px solid #000; background:#fff; position:relative; margin-bottom:5px; float:left; }
            .container { width:309px; border:none; }
            .tallTop, .tallBottom { height:400px; z-index:1; }
            .tallTop { float:right; }
            .shortTop, .shortBottom { height:200px; z-index:2; width:157px; }
            .shortTop { margin-right:-1px; border-right:none; }
            .shortBottom { margin-left:-1px; border-left:none; float:right; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="shortTop"></div>
            <div class="tallTop"></div>
            <div class="tallBottom"></div>
            <div class="shortBottom"></div>
        </div>
    </body>
</html>
0 голосов
/ 10 июля 2009

Это всего лишь вопрос немного поиграть с границами, отступами и относительным позиционированием. Смотрите этот пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>DIVs</title>
    <style type="text/css">
        body, html {
            background: #eee;
        }

        div.box {
            background: #fff;
            border-style: solid;
            border-width: 2px;
            position: relative;
            width: 100px;
            z-index: 1;
        }

        div.group {
            float: left;
        }

        #box-1, #box-4 {
            z-index: 2;
        }

        #box-1 {
            border-color: #f00;
            border-bottom: 0;
            border-right: 0;
            padding-right: 2px;
        }

        #box-2 {
            border-color: #f0f;
        }

        #box-3 {
            border-color: #0f0;
        }

        #box-4 {
            border-color: #00f;
            border-left: 0;
            border-top: 0;
            padding-left: 2px;
        }

        #group-2 {
            left: -2px;
            position: relative;
        }
    </style>
</head>
<body>
<div class="group" id="group-1">
    <div class="box" id="box-1">one<br />one<br />one<br />one</div>
    <div class="box" id="box-2">two<br />two<br />two<br />two<br />two<br />
    two</div>
</div>
<div class="group" id="group-2">
    <div class="box" id="box-3">three<br />three<br />three<br />three<br />
    three<br />three</div>
    <div class="box" id="box-4">four<br />four<br />four</div>
</div>
</body>
</html>
0 голосов
/ 10 июля 2009

То, что вы просите, невозможно ни одним кросс-браузерным способом, использующим только CSS. Для этого вам обязательно нужно использовать JavaScript.

...