JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text">When used on a page, the white line down the center that shows below, is not there. </div>

<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>
<hr style="border-top: black dotted 3px">

<div class="triangle-wrapper-50">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>

CSS

.text{text-align:center; padding-bottom:50px}

.triangle-wrapper-50 {
	  width: 50%;
    height: 100px;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.triangle-wrapper-100 {
	  width: 100%;
    height: 100px;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.triangle-right {
    right: 0px;
    background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
    width: 50%;
    height: 100px;
}
.triangle-left {
    left: 0px;
    background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
    width: 50%;
    height: 100px;
    transform: scaleX(-1);
}