创建特定的边框效果

Question

如何在下面的15个拼图中创建每个拼贴的边框效果（拼贴每个角落的锐边）？

Answer 1

您还可以使用:pseudo元素和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>

Answer 2

SVG clip-path正是您所寻找的，但并未得到广泛支持。

这里有人谈到：Slanted Corner on CSS box

你想要的那个叫做斜角盒：

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);