css - 创建特定的边框效果

Question

我如何为下面的 15 个拼图中的每个图 block 创建边框效果(图 block 每个 Angular 上的锐边)？

Answer 1

你也可以使用:伪元素和border

codepen - http://codepen.io/victorfdes/pen/GJYGKV

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.a {
  width: 100px;
  display: inline-block;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.a:nth-child(even) .b {
  background: #DCD8BB;
}
.b {
  position: absolute;
  width: 116px;
  height: 116px;
  border: 4px solid #8B8B83;
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: left top;
  top: 50%;
  left: 50%;
  background: #490506;
  z-index: -1;
}
.b:before,
.b:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: inherit;
  border-color: inherit;
}
.b:before {
  border-width: 0 4px;
  border-style: solid;
  width: 100px;
  height: 60px;
}
.b:after {
  border-width: 4px 0;
  border-style: solid;
  height: 100px;
  width: 60px;
}
.b span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
  color: grey;
  font-size: 30px;
}

<div class="a">
  <div class="b">
    <span>1</span>
  </div>
</div>
<div class="a">
  <div class="b">
    <span>2</span>
  </div>
</div>
<div class="a">
  <div class="b">
    <span>3</span>
  </div>
</div>
<div class="a">
  <div class="b">
    <span>4</span>
  </div>
</div>