如何制作这种形状的CSS边框？

Question

我习惯于使用CSS-border-width来制作该形状，但是现在我无法在该形状周围添加边框。或还有另一种方法来制作该形状。

在摘要中签出

.month {
  width: 0;
  height: 0;
  border: 61px solid transparent;
  border-bottom-color: #008fc1;
  position: relative;
  top: -61px;
}

.month:after {
  content: '';
  position: absolute;
  left: -61px;
  top: 61px;
  width: 0;
  height: 0;
  border: 61px solid transparent;
  border-top-color: #acd3f1;
}

<div class="month">
  <a href="#" class=""></a>
</div>

Answer 1

您可以像下面那样简化代码：

.month {
 width:100px;
 height:100px;
 background:
  linear-gradient(to bottom left,#008fc1 50%,#acd3f1  0) content-box,
  #acd3f1;
 padding:4px; /* to control the border */
 margin:25px;
 transform:rotate(-45deg);
}

<div class="month">
</div>

您可以使用伪元素轻松地执行此操作以添加内容：

.month {
 width:100px;
 height:100px;
 position:relative;
 z-index:0;
 margin:25px;
 color:#fff;
 line-height:80px;
}

.month:before {
 content:"";
 position:absolute;
 z-index:-1;
 left:0;
 right:0;
 top:0;
 bottom:0;
 background:
  linear-gradient(to bottom left,#008fc1 50%,#acd3f1  0) content-box,
  #acd3f1;
 padding:4px; /* to control the border */
 transform:rotate(-45deg);
}

<div class="month">
  some text here
</div>