HTML CSS - Arrow down divider


PHOTO EMBED

Tue Dec 15 2020 22:41:51 GMT+0000 (UTC)

Saved by @view____source #html #css

<style>
.divider_wrapper {
    padding-bottom: 30px;
    padding-top: 60px;
}
.divider {
    position: relative;
    margin-top: 0px;
    height: 1px;
}
.div-transparent:before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    width: 90%;
    height: 1px;
    background-image: linear-gradient(to right,transparent,#aaa,transparent);
}
.div-arrow-down:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -7px;
    left: calc(50% - 7px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: white;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
</style>
<div class="divider_wrapper">
  <div class="divider div-transparent div-arrow-down">
  </div>
</div>
content_copyCOPY

https://www.ampleforth.org/