Border styles on unique button shape

问题

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

回答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>

回答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

来源：https://stackoverflow.com/questions/57844759/border-styles-on-unique-button-shape