html - 用除数制作 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

在顶部叠加几个伪元素可能会起作用:

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;
}

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