具有左右双边框CSS

Question

我想要我的双边框，其中一条线比左、右另一条线短。

左边目前只有 1 行缺少较小的一行

   .double-border {
  --b: 2px; /* thickness */
  --c: #3CD5AF;
  
  height: 100%;
  border-right: var(--b) solid var(--c);
  border-left: var(--b) solid var(--c);
  background: linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}

 <div class="col-lg-8 double-border">
                            <h4>About the episode subhead lorem ipsum 1</h4>
                            <p>Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor. Voluptate exercitation incididunt aliquip deserunt.</p>
                            <a hreff="">link</a></a>
                        </div>

Answer 1

只需使用两个背景渐变。

.double-border {
  --b: 2px;
  /* thickness */
  --c: #3CD5AF;
  height: 100%;
  border-right: var(--b) solid var(--c);
  border-left: var(--b) solid var(--c);
  background: 
  linear-gradient(var(--c) 0 0) left 10px bottom 0/var(--b) 50% no-repeat, 
  linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}

div {
  padding: 0 2em;
}

<div class="col-lg-8 double-border">
  <h4>About the episode subhead lorem ipsum 1</h4>
  <p>Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor. Voluptate exercitation incididunt aliquip deserunt.</p>
  <a hreff="">link</a></a>
</div>