Помогите пожалуйста. Как нарисовать вот такую рамку как на скриншоте, не меняя HTML кода и используя только CSS

Question

<!DOCTYPE html>
<htmllang="en">
<head>
    <meta charset="UTF-8">
    <title>Groot</title>
    <meta name="description"content="t17. Groot">
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <h1>Groot!</h1>
    <div class="box">I am Groot!</div>
</body>

Answer 1

Например так

.box {
  display: block;
  --bg-color: #ccc; /* Цвет фона */
  --br-color: #666; /* Цвет линий */
  --br-width: 20px; /* Длина выступа линий */
  --br-weight: 1px; /* Толщина линии */
  background: 
    /* Левая */
    linear-gradient(0, var(--br-color), var(--br-color)) no-repeat var(--br-width) center / var(--br-weight) 100%,
    /* Правая */
    linear-gradient(0, var(--br-color), var(--br-color)) no-repeat calc(100% - var(--br-width)) center / var(--br-weight) 100%,
    /* Верхняя */
    linear-gradient(0, var(--br-color), var(--br-color)) no-repeat center var(--br-width) / 100% var(--br-weight),
    /* Нижная */
    linear-gradient(0, var(--br-color), var(--br-color)) no-repeat center calc(100% - var(--br-width)) / 100% var(--br-weight),
    /* Это фон */
    linear-gradient(0, var(--bg-color), var(--bg-color)) no-repeat center center / calc(100% - (var(--br-width) * 2 + var(--br-weight))) calc(100% - (var(--br-width) * 2 + var(--br-weight)));
  /* в padding 10px = отступ "внутри фона" + в скобках = размеры линий */
  padding: calc(10px + (var(--br-width) + var(--br-weight)));
  box-sizing: border-box;
  position: relative;
}

<div class="box">I am Groot!</div>

БЛОГ НА HUSL

Помогите пожалуйста. Как нарисовать вот такую рамку как на скриншоте, не меняя HTML кода и используя только CSS

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