Création de verrouillage, des bords irréguliers avec CSS

j'ai une mise en page composée de 4 « verrouillage » divs, comme ceci:Création de verrouillage, des bords irréguliers avec CSS

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

Je veux mettre les frontières autour de la « top » et les bits « bas », à ont l'aspect de la mise en page finale comme:

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

(Lorsque deux divs utilisés pour atteindre devraient être une frontière lisse qui ressemble à une forme unifiée)

Comment dois-je faire correctement en CSS?

Source

2009-07-09 cksubs

Here's my solution. Il utilise des flotteurs avec une marge négative et Fakes la partie sans frontière en fixant la frontière à la couleur de fond de la 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>

Source

2009-07-09 22:14:21 Emily

-4

Ce que vous demandez n'est pas possible d'une manière compatible avec tous les navigateurs en utilisant CSS seul. Vous devez absolument utiliser JavaScript pour cela.

Source

2009-07-09 20:57:34

-1 il y a une multitude de façons de le faire comme illustré par 3 réponses (qui semblent aller dans le bon sens). ne jamais dire jamais ... –

Vous pouvez faire ce 1px frontières et 1px chevauchement des divs positionnés absolus. avoir le plus petit des divs pour un intersect donné n'a pas de frontière, et le faire chevaucher la frontière de la plus grande div.

Éditer: De plus, le plus petit div devrait avoir un index z plus élevé donc il repose sur le dessus.

Source

2009-07-09 20:58:27

Probablement ne sera pas parfait mais devrait fonctionner. – user103219

Il s'agit juste de jouer un peu avec les bordures, le rembourrage et le positionnement relatif. Voir cet exemple:

<!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>

Source

2009-07-09 21:21:14 Blixt

Essayez celui-ci. Utilisation de flottants, de marges négatives et d'index z seulement.

<!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>

Source

2009-07-10 05:35:13

Création de verrouillage, des bords irréguliers avec CSS

Répondre

Questions connexes