Как сделать такую рамку на css?

Question

Answer 1

.block {
  width: 50px;
  height: 50px;
  position: relative;
}

.top,
.bot {
  width: 40px;
  height: 1px;
  background-color: red;
  position: absolute;
}

.left,
.right {
  width: 1px;
  height: 40px;
  background-color: red;
  position: absolute;
}

.left {
  bottom: 0%;
  right: 100%;
}

.right {
  top: 0;
  left: 100%;
}

.top {
  bottom: 100%;
  left: 0;
}

.bot {
  top: 100%;
  right: 0;
}

<div class="block">
  <div class="left"></div>
  <div class="right"></div>
  <div class="top"></div>
  <div class="bot"></div>
</div>

Answer 2

Не идентичный рендер, но зато без лишних элементов. Думаю что бордюр можно улучшить если покрутить угол (1.8deg) и позици цветов в градиенте.

.date {
  display: inline-block;
  font-weight:300;
  font-family: Open Sans, sans-serif;
  line-height:1;
  padding:6px;
  
  border-width: 2px;
  border-style: solid;
  border-image: 
    linear-gradient(
      1.8deg, 
      #F6D894 2px,
      #fff 2px,
      #fff 18px,
      #F6D894 19px, 
      #F6D894 90%,
      #fff 91%,
      #fff 97%,
      #F6D894 97%
    ) 1;
}

.date b {
  font-size:50px;
  display: block;
  font-weight:300;
}

.date::before {
  
}

<p class="date">
  <b>27</b> января
</p>

Answer 3

Рамка выполнена по вашим размерам. Шрифт на ваше усмотрение.

div {display: inline-block; position: relative; padding: 10px 10px 10px 10px; font-size: 15px; font-family: monospace; line-height: 2; text-align: center; color: rgba(0,0,0,0.8);
     background:
       linear-gradient(0deg, goldenrod 100%, transparent 100%) 0% 100%/90% 1px no-repeat,
       linear-gradient(0deg, goldenrod 100%, transparent 100%) 100% 0%/90% 1px no-repeat,
       linear-gradient(90deg, goldenrod 100%, transparent 100%) 0% 0%/1px 80% no-repeat,
       linear-gradient(90deg, goldenrod 100%, transparent 100%) 100% 30%/1px 80% no-repeat;}
span {display: block; transform: scale(2, 3); font-size: 20px;}

<div><span>27</span>января</div>

БЛОГ НА HUSL

Как сделать такую рамку на css?

Ответы (3 шт):