Dwa divy, jeden nad drugim, wspólny border

Question

Witam, mam dwa diivy, jeden na drugim. Chcę zrobić aby w miejscu w którym dwa divy są na sobie border był niewidoczny, tak jak na obrazku niżej. Dziękuję za odpowiedzi ;)

 

Comments

Poza sztuczka z divami pod spodem nie przychodzi mi nic do glowy. To by wygladalo tak stawiasz diva dajesz mu borderka ustawiasz obok drugiego diva z borderkami a na tym pierwszym stawiasz 3 diva bez borderkow

Answer 1

Jedna z możliwości. robisz 2 DIVy, ustawiasz je tak jak chcesz - to już wynika z Twojego rysunku. Dalej za pomocą pseudoklas ::before oraz ::after tworzysz sobie kreski, które kolorujesz na biało i ustawiasz w miejscach, gdzie mają zakryć te bordery.

DEMO: http://codepen.io/ChrissP92/pen/JXVVbg?editors=1100

Druga opcja. Tworzysz za pomocą klasy ::before lub ::after mały prostokąt, tak aby jego lewa i prawa krawędź pokryły się z odpowiednimi kawałkami borderów i jego lewy oraz górny border kolorujesz na biało.

DEMO: http://codepen.io/ChrissP92/pen/PNggpp?editors=1100

Comments

to jest jeszcze trzecia opcja, dodać w pierwszym divie kolejnego diva tych samych wymiarów z z-index najwyższym i bez obramowania, o tak:

<div class="first">
  <div class="third"></div>
</div>
<div class="second"></div>

.first, .second, .third
{
  width: 300px;
  height: 300px;
  border: 1px solid green;
  position: absolute;
  background: white;
}

.second
{
  z-index: 2;
  left: 200px;  
  top: 250px;  
}
.third{
  z-index: 3;
  border: none;
}

 

---

Dziękuję za pomoc ;)