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

Question

score 3 · Answer 1 · answered Mar 14 '20 at 05:35

Не идентичный рендер, но зато без лишних элементов. Думаю что бордюр можно улучшить если покрутить угол (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>

Sevastopol' · Accepted Answer · 2020-03-14T11:20:37.547

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

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>

score 1 · Answer 3 · edited Mar 14 '20 at 05:06

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

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

3 Answers3