Задать уголки для блока

Question

У меня есть html код:

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

Нужно добавить css стили не изменяя html код, чтобы получилось как на картинке

Как я понял нужно использовать after и before.

Answer 1

Как я понял нужно использовать after и befoere

а можно нарисовать задник и сделать через обычный background

через before & after:

div, div:before, div:after {
  box-sizing:     border-box;
}

div {
  position:       relative;
    
  width:          80px;
  height:         50px;
  line-height:    50px;
  
  margin:         25px; /* для отладки */
  padding-left:   25px;
  
  background:     #d0d0d0;
}

div:before, div:after {
  position:       absolute;
  content:        '';
}

div:before {
  left:           -10px;
  top:            0px;
  
  width:          100px;
  height:         50px;

  border-top:     1px solid black;
  border-bottom:  1px solid black;
}

div:after {
  left:           0px;
  top:            -10px;
  
  width:          80px;
  height:         70px;
  
  border-left:    1px solid black;
  border-right:   1px solid black;  
}

<div>test</div>

Answer 2

вам в помощь: background-color, padding, margin, border.

body {
    padding: 10px; /* изменяй 10px, так как я хз сколько на картинке px */
    margin:  0;
}

.box {
    background-color: ЦВЕТ;
    border: 1px solid ЦВЕТ;
    padding: 20px; /* изменяй 20px, так как я хз сколько на картинке px */
}

Answer 3

Например:

* {
  box-sizing: border-box;
}

.box {
  position: relative;
  border: 1px solid;
  margin: 20px;
  background: #eee;
}

.box:before,
.box:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
}

.box:before {
  left: -21px;
  top: -21px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.box:after {
  right: -21px;
  bottom: -21px;
  border-left: 1px solid;
  border-top: 1px solid;
}

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

БЛОГ НА HUSL

Задать уголки для блока

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