caret

by Marcos Moitas

HTML

<p>
Lorem ipsum dolor sit amet<br/>
Lorem ipsum dolor sit amet<br/>
Lorem ipsum dolor sit amet<br/>
Lorem ipsum dolor sit amet<br/>
Lorem ipsum dolor sit amet<br/>
</p>

<div class="wv-table__divider-caret"></div>

SCSS

//html { margin: 40px;}

.wv-table__divider-caret {
  width:70%;
  margin: 16px auto;
  border-bottom: solid 1px #7F7F7F;
  position: relative;

  &::after {
    content:"";
    position: absolute;
    border-style: solid;
    border-width: 8px 8px 0;
    border-color: white transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 1px;
    left: 75%;
    transform: translate(-50%, -100%) rotate(180deg);
  }
  &::before {
    content:"";
    position: absolute;
    border-style: solid;
    border-width: 8px 8px 0;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 0;
    left: 75%;
    transform: translate(-50%, -100%) rotate(180deg);
  }
}