Question

如何从下面的代码仅将css用于构建矩形？

<div id='rectangle'>
    <div class='line'></div>
    <div class='line'></div>
    <div class='line'></div>
    <div class='line'></div>
  </div>

Answer 1

您可以使用以下内容。我不建议使用id进行样式设置。如果出于某种原因您想要比rectangle多id而不是id的方法。这是因为和identification可以看作是一个人的id。意味着.rectangle { width: 200px; height: 200px; position: relative; } .line { position: absolute; background: red; } .top, .bottom { height: 1px; width: 100%; left: 0; } .top { top: 0; } .bottom { bottom: 0; } .left, .right { height: 100%; width: 1px; top: 0; } .left { left: 0; } .right { right: 0; }在页面上应该是唯一的。

<div class="rectangle">
  <div class="line top"></div>
  <div class="line right"></div>
  <div class="line bottom"></div>
  <div class="line left"></div>
</div>

.rectangle {
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

或：

<div class="rectangle"></div>

 SELECT p.id, p.name, p.update 
   FROM products p
  WHERE 1=0 
     OR ( p.id = ? AND updated > ? )
     OR ( p.id = ? AND updated > ? )
     OR ( p.id = ? AND updated > ? )

Answer 2

我们在这里：https://codepen.io/anon/pen/rZaeXr

.line:first-child {
 width: 100px;
  height: 4px;
  background: red;
}

.line:nth-child(2) {
 width: 100px;
  height: 4px;
  margin-top: 100px;
  background: red;
}

.line:nth-child(3) {
 width: 100px;
  height: 4px;
  background: red;
  transform: rotate(90deg) translate(-56px, 50px);
}

.line:nth-child(4) {
 width: 100px;
  height: 4px;
  background: red;
  transform: rotate(90deg) translate(-60px, -50px);
}

如何仅使用css在html5的容器内绘制四个div的矩形？

2 个答案: