Custom Div Shape CSS?-CodePudding

I have to be honest , I'm stuck !

I need to reproduce these green lines around my div :

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 spécimen</p>
    </div>

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

Thanks for your help !

CodePudding user response：

2 gradients can do it:

.description-page {
  padding:10px;
  --c:green 270deg,#0000 0;
  --b:2px; /* the thickness */
  background:
    conic-gradient(from  90deg at var(--b) calc(100% - var(--b)),var(--c)) 0 100%,
    conic-gradient(from -90deg at calc(100% - var(--b)) var(--b),var(--c)) 100% 0;
  background-size:30px 30px;
  background-repeat:no-repeat;
}

p {
  margin:0;
}

<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>

CodePudding user response：

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>