Css连接点创建正方形

Question

如何使用css创建正方形，只有四条线连接在四个点上。 我需要让每一面都有不同的颜色......

提前谢谢

Answer 1

这样的事情： HTML：

<div class='holder'>
  <div class="square">
    <div class='content'>

    </div>
  </div>
</div>

的CSS：

.holder {
  width: 40px;//or a percentage it will still be a square
 }

.square {
  position: relative;
  width: 100%;
  border-top: 3px solid red;
  border-bottom: 3px solid blue;
  border-right: 3px solid yellow;
  border-left: 3px solid green;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}