用除数制作4个细胞

Question

如何使这些除数成为最简单的盒子。我有这个简单的框html和css。 HTML代码是：

<div id="box"></div>

和框的CSS代码是：

#box{

    width: 350px;
    height: 200px;
    border-radius: 5px; /* IE10+ */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);

}

行。我们去除数......我怎么能这样做？图片链接在这里：

由于

Answer 1

顶部覆盖的几个伪元素可能有效：

＆＃13;

＆＃13;

body {
  background: #c0ffee;
}
#box {
  width: 350px;
  height: 200px;
  margin: 2em auto;
  border-radius: 5px;
  /* IE10+ */
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
  /* Opera */
  background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
  /* W3C Markup */
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
  position: relative;
}
#box::before,
#box::after {
  content: '';
  position: absolute;
}
#box::before {
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -3px;
  height: 4px;
  background: linear-gradient(to bottom, white, lightgrey);
  border-radius: 2px;
  z-index: 1;
}
#box::after {
  width: 4px;
  top: 0%;
  left: 50%;
  margin-left: -3px;
  height: 100%;
  background: linear-gradient(to left, white, lightgrey);
  border-radius: 3px;
  z-index: 2;
}

＆＃13;

<div id="box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您要么需要在图像上插入带有线条的背景图像，要么在框内创建部分，并根据它在主框中的位置设置框的样式。

＆＃13;

＆＃13;

#box{
    width: 350px;
    height: 200px;
    border-radius: 5px; /* IE10+ */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
    font-size:0px;
}
.section{
  width:49.25%;
  height:49%;
  margin:0px;
  padding:0px;
  display:inline-block;
}

#top-left{
  border-bottom:5px solid white;
  border-right:5px solid white;
}

#top-right{
  border-bottom:5px solid white;
}

#bottom-left{
  border-right:5px solid white;
}

＆＃13;

<div id="box">
  <div class="section" id="top-left"></div>
  <div class="section" id="top-right"></div>
  <div class="section" id="bottom-left"></div>
  <div class="section" id="bottom-right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;