Custom Div Shape CSS?

Issue

I have to be honest , I'm stuck !

I need to reproduce these green lines around my div :

enter image description here

I've tried with border-top/right/left/bottom but you can't resize the width of these. So I tried with :before and :after and didn't went well haha

I currently only have this code :

<div class="description-page">
    <p>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre lorem</p>
</div>

I've been looking around for ages and couldn't find anything similar ...

Thanks for your help !

Solution

Just use ::before, and ::after pseudoselectors

.description-page {
  position: relative;
  width: 90%;
  min-height: 50px;
  height:auto;
  padding: 20px;
}

.description-page::before,
.description-page::after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
}

.description-page::before {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}

.description-page::after {
  top: 0;
  right: 0;
  border-top: 1px solid red;
  border-right: 1px solid red;
}

<div class="description-page">
  <p>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen</p>
</div>

Answered By - Sfili_81