Как сделать эту 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>