Как сделать такие линии между блоками?

#html #css

Имеется такая вёрстка блоков:



* {
width:576px;
}
.item {
    border: 1px #dededc solid;
    height: 232px;
}

#four-blocks {
    overflow: hidden;
}

#four-blocks .item {
    width: 280px;
    float: left;
    margin-bottom: 10px;
}

#four-blocks .item:nth-child(1), .item:nth-child(3){
    margin-right: 11px;
    /*box-shadow: 0 3px 0 3px coral;*/
}

                

                

                

                

            




Нужно, чтобы по горизонтали и по вертикали блоки отделяла линия, вот так:



Как это сделать? Я что-то не соображу.
    

Ответы

Ответ 1

Это можно сделать с помощью псевдокласса :nth-child и псевдоэлементов :before и :after



#four-blocks {
  overflow: hidden;
  width: 580px;
}

#four-blocks .item {
  border: 1px #dededc solid;
  height: 232px;
  float: left;
  position: relative;
  width: 280px;
}

#four-blocks .item:nth-child(-n + 2) {
  margin-bottom: 13px;
}

#four-blocks .item:nth-child(-n + 2):before {
  content: '';
  background: #F2F2F0;
  height: 1px;
  position: absolute;
  bottom: -8px;
  width: 100%;
}

#four-blocks .item:nth-child(2n + 1) {
  margin-right: 13px;
}

#four-blocks .item:nth-child(2n + 1):after {
  content: '';
  background: #F2F2F0;
  height: 100%;
  position: absolute;
  right: -8px;
  width: 1px;
}

  

  

  

  




Ответ 2

Добрый день, я решил вашу задачу так, добавил в двух блоках по каждой еще две блоки.
и дал им абсолютное позиционирование от родительского блока, после этого уже можем
переместить их куда нам нужно.
Нашими линиями будут блоки 
 с классами item.



#four-blocks{
  width: 180px;
}
#four-blocks .item_cont{
  position: relative;
  width: 80px;
  float: left;
  margin-bottom: 11px;
  height: 80px;
  border: 1px #dededc solid;
}
#four-blocks .item_cont .item{
  position: absolute;
  background: #dededc;
}
#four-blocks .item_cont .item:nth-child(1){
  width: 80px;
  height: 1px;
}
#four-blocks .item_cont .item:nth-child(2){
  width: 1px;
  height: 80px;  
}
#four-blocks .item_cont:first-child .item:nth-child(1){  
  bottom: -7px;
}
#four-blocks .item_cont:first-child .item:nth-child(2){
  right: -7px;
}

#four-blocks .item_cont:last-child .item:nth-child(1){
  top: -7px;
}
#four-blocks .item_cont:last-child .item:nth-child(2){
  left: -7px;
}


#four-blocks {
    overflow: hidden;
}


#four-blocks .item_cont:nth-child(1), .item_cont:nth-child(3){
    margin-right: 11px;
}