html - 如何围绕这个形状制作这个 css 边框？

Question

我曾经使用 CSS-border-width 来制作那个形状，但现在我无法在这个形状周围设置边框。或者还有另一种选择来制作这个形状。

checkout 片段

.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>