Border styles on unique button shape - html

Question

I am attempting to align the border of the pseudo-element to evenly match the border of the button. I am using ::before and ::after pseudo-elements overlaid to get this effect, but they do not properly match the rest of the border.
I have messed around with the left and right positioning as well as the border-width of each element, but can't seem to get them to line up perfectly
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-txt{
color: black;
}
button {
border: none;
outline: none;
padding: 0;
border-width: 0;
left: 40%;
}
button:hover {
cursor: pointer;
}
.signpost { /* our rectangle */
width:250px;
height:50px;
background-color: yellow;
margin:0px auto;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
.signpost:after { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:81%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: #fff; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.signpost:before { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:80%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: red; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<button class="signpost">
<p class="btn-txt">HELLO</p>
</button>
Example of current issue: https://codepen.io/codingforthefuture/pen/YzKeeVJ

Answer 1

Here is a different idea with less of code where the alignment will be easy to handle:
.box {
display:inline-block;
position:relative;
margin:10px;
padding:10px 50px 10px 10px;
border:2px solid red;
border-right:0;
z-index:0;
background:linear-gradient(yellow,yellow) left/calc(100% - 40px) 100% no-repeat;
}
.box:before,
.box:after{
content:"";
position:absolute;
z-index:-1;
right:0;
width:40px;
top:0;
bottom:50%;
border-right:2px solid red;
background:yellow;
transform:skewX(-45deg);
transform-origin:top;
}
.box:after {
transform:skewX(45deg);
transform-origin:bottom;
top:50%;
bottom:0;
}
<div class="box"> some text </div>
<div class="box"> some long long text </div>
<div class="box"> some long <br> long text </div>

Answer 2

I think I came to a suitable solution. From my original attempt I made the pseudo elements complete squares and rotated them 45deg, then overlapped them. I think this resolves the issues when zooming in and out too. It also makes the edges of the flag pointed instead of squared off, which I think looks better.
#flag4 {
width: 200px;
height: 56px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: yellow;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
margin-bottom: 20px;
}
#flag4::before,
#flag4::after {
content: "";
position: absolute;
top: 10px;
width: 0;
height: 0;
left: 87.2%;
border-right: 26px solid #fff;
border-top: 26px solid #fff;
border-bottom: 25px solid #fff;
border-left: 25px solid #fff;
transform: rotate(45deg);
}
#flag4::before{
border-right: 26px solid red;
border-top: 26px solid red;
border-bottom: 25px solid red;
border-left: 25px solid red;
left: 86.6%;
}
codepen: https://codepen.io/codingforthefuture/pen/WNezNzZ