.corner {
   position: relative;
}
.corner .before,
.corner .after {
   display: none;
}
.corner .corner__bar {
   position: absolute;
   width: 100%;
   z-index: 10;
   left: 0;
   /* height: 20px; */
}
.corner .corner__bar .before,
.corner .corner__bar .after {
   content: "";
   position: absolute;
}

.corner .corner__bar--top {
   top: 0;
}
.corner .corner__bar--top .before,
.corner .corner__bar--top .after {
   border: var(--corner-size) solid transparent;
   top: 0;
}
.corner.left-top .corner__bar--top .before {
   border-bottom: var(--corner-size) solid transparent !important;
   left: 0;
   border-right: var(--corner-size) solid transparent !important;
   display: block;
}
.corner.right-top .corner__bar--top .after {
   border-bottom: var(--corner-size) solid transparent !important;
   border-left: var(--corner-size) solid transparent !important;
   right: 0;
   display: block;
}

.corner .corner__bar--bottom {
   bottom: 0;
}
.corner .corner__bar--bottom .before,
.corner .corner__bar--bottom .after {
   border: var(--corner-size) solid transparent;
   bottom: 0;
}

.corner.left-bottom .corner__bar--bottom .before {
   border-top: var(--corner-size) solid transparent !important;
   left: 0;
   border-right: var(--corner-size) solid transparent !important;
   display: block;
}
.corner.right-bottom .corner__bar--bottom .after {
   border-top: var(--corner-size) solid transparent !important;
   border-left: var(--corner-size) solid transparent !important;
   right: 0;
   display: block;
}

.split-container.content-right.right-top .after{
   right: 50%;
} 

.split-container.content-left.left-top .before{
   left: 50%;
}