CSS3 Triangle dividers

Split up sections with triangle dividers. Inspired by mylyve.com and css-tricks.

HTML

<section>
    <div class="section-wrapper A">
        Here is section A
    </div>
</section>

<section>
    <div class="section-wrapper B">
        Here is section B
    </div>
</section>

CSS

div.section-wrapper {
    width: 100%;
    height: 200px;
    padding-top: 20px;
    border-top: 1px solid black;
    position: relative;
    text-align: center;
}

div.section-wrapper:before {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 20px);
    top: 50px;
    width: 1000px;
    height: 7px;
    width: 50%;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid black;
}

.A {
    background-color: pink;
}

.B {
    background-color: orange;
}