Как сделать такой блок

Рейтинг: -5Ответов: 1Опубликовано: 24.04.2023

[![Как сделать бордер по углам?][1]][1]

Нужно сделать такой блок и бордер по углам как на скрине, не пойму как сделать

css html
Источник: Stack Overflow на русском

Ответы

▲ 2

В принципе ни чего сложного

Обычные 4 div которые позиционируем и в средний вставляем текст

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.items {
  padding: 30px;
  width: 400px;
  height: 250px;
  position: relative;
  margin: 30px auto;
}

.item {
  border: 6px solid #000;
  width: 100%;
  height: 100%;
}

.outer-b {
  width: 50px;
  height: 50px;
  position: absolute;
  border: 6px solid #000;
}

.tl {
  border-right: none;
  border-bottom: none;
  top: 0;
  left: 0;
}

.tr {
  border-left: none;
  border-bottom: none;
  top: 0;
  right: 0;
}

.bl {
  border-right: none;
  border-top: none;
  bottom: 0;
  left: 0;
}

.br {
  border-left: none;
  border-top: none;
  bottom: 0;
  right: 0;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: url(https://sun9-47.userapi.com/TlC8QzM7q5RVz6sKGa7R7CWuhS0mMhVXMCCLiw/fhVt-Gz4Dyw.jpg);
  background-size: cover;
}

.item p {
  font-size: 50px;
  font-family: sans;
  font-weight: 700;
  line-height: 45px;
}

.item p:nth-of-type(1) {
  color: white;
}

.item p:nth-of-type(2) {
  color: red;
}
<div class="items">
  <div class="outer-b tl"></div>
  <div class="outer-b tr"></div>
  <div class="item">
    <p>Свята</p>
    <p>Росія</p>
  </div>
  <div class="outer-b bl"></div>
  <div class="outer-b br"></div>
</div>