html - CSS 将屏幕分成 4 个相等的部分，它们之间有边框

Question

我目前有一个代码可以将屏幕分成 4 个相等的部分并且可以正常工作，但我还想要一条水平和垂直穿过屏幕的 1px 线。有人知道如何实现它吗？

CSS:

#NW { position:fixed; width:50%; height:50%; top:0;   left:0;   background:orange  }
#NE { position:fixed; width:50%; height:50%; top:0;   left:50%; background:blue    }
#SW { position:fixed; width:50%; height:50%; top:50%; left:0;   background:green   }
#SE { position:fixed; width:50%; height:50%; top:50%; left:50%; background:red     }

html:

<div id="NW"></div>
<div id="NE"></div>
<div id="SW"></div>
<div id="SE"></div>

谢谢!

Answer 1

添加:

#SE, #SW {
    border-top:1px solid white;
}
#NE, #SE {
    border-left:1px solid white;
}

jsFiddle example