Как сделать эти коробки в чистом виде html и css?

Question

Мне было интересно, как можно сделать такие углы в контейнерах. https://modusgames.com/cris-tales/it/#

В css этого веб-сайта они называются .green-corners: before и: after, я запутался.

Answer 1

Они использовали :: after и :: before и поместили их в угол своих контейнеров, вот код. Примечание: Эта фигура не является частью кода, это просто .png, вот он: https://modusgames.com/cris-tales/wp-content/themes/cristales-child/images/green-corner.png Вы используете absolute, чтобы перемещать его по всей странице и применять положение: относительно родительский элемент вашего absolute, затем используйте ширину и высоту, чтобы сделать ваш img сколь угодно длинным, и используйте top / left / right / bottom, чтобы изменить местоположение img, это вся технология, которую вы сказали.

.green-corners:before {
        content: "";
        width: 80px;
        height: 80px;
        display: block;
        position: absolute;
        background: url(images/green-corner.png) 0 0 no-repeat;
        background-size: contain;
        top: 0px;
        left: 0px;
 }

Answer 2

Они используют css pseudo селекторы :after и :before в качестве декоративных элементов с изображением и их позиционированием. Вот базовый c пример того же:

Просто замените другие изображения. Я только что добавил один в качестве примера

.box{
  width: 300px;
  padding: 100px 20px;
  background: skyblue;
  position:relative;
  text-align:center;
}
.box:after,.box:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width: 50px;
  height:50px;
  background:orange;
}
.box:before{
  background: url("https://modusgames.com/cris-tales/wp-content/themes/cristales-child/images/green-corner.png") center center no-repeat;
  background-size:cover;
}
.box:after{
  left:auto;
  right:0;
}

.corners{
  border: 2px solid black;
  padding: 20px;
}
.corners:after,.corners:before{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width: 50px;
  height:50px;
  background:orange;
}
.corners:after{
  left:auto;
  right:0;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <div class="corners">Some Content</div>
</div>

Надеюсь, это поможет!