Use Javascript/jQuery in CSS to make border-right mirror border-bottom?

First off, let me apologize for my ignorance. I'm a new developer just trying to lea the ropes, and I've come across a roadblock here. I'll briefly explain my WP setup:

Section div > Section class > section::before and ::after pseudo elements.

I have inherit for my pseudo, so when I use my front end editor to change the border color size, etc. the pseudo follows. However, it only affects the same border as its parent. What I'm trying to do is have the border-right of the ::after pseudo use the same value that is entered as its border-bottom value.

Hopefully that makes sense. I wish I had the words to more articulately explain what I'm going after. Please let me know if I need to clarify anything. Thanks!

    /* Triangles */
.ss-style-triangles::before,
.ss-style-triangles::after {
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
  border: inherit;
}

.ss-style-triangles::before {
    display: none;
  border: inherit;
  top: -25px;
    background: inherit;
  z-index: -9999;
}

.ss-style-triangles::after {
  border-right: solid 1px;
  bottom: -26px;
    z-index: 0;
    background: inherit;
}