<p>I currently find myself needing to make something like this. </p> <p>My first thought was to use clip-path, but the rounded corners are difficult to pull off, and it's difficult to maintain 22.5 degrees when the button changes width due to its content. </p> <p>So I ended up making each button as two <em>divs</em>, with one div tilted 22.5 degrees and overlapping the regular rectangular div. Then I added a border radius to both.</p> <p><br /></p> <pre class="brush:css;toolbar:false;">body { line-height: 0; font-size: 16px; background-color: black; } .cta-button-group { display: flex; gap: 2rem; align-items: center; } .button-angular-wrapper-left { display: flex; isolation: isolate; position: relative; height: 40px; width: fit-content; } .button-angular-wrapper-left .button-angular-main { border-radius: 7px 0 0 7px; height: 100%; display: inline-grid; place-items: center; padding-inline: 8px 16px; margin-right: 13px; transition: background-color 50ms; } .button-angular-wrapper-left .button-angular-slant { border-radius: 0 7px 7px 0; height: 100%; width: 24px; position: absolute; right: 0; top: 0; bottom: 0; z-index: -1; transition: background-color 50ms; } .button-angular-wrapper-left .button-angular-slant.back-slash { transform: skewX(22.5deg); } .button-angular-wrapper-left .button-angular-slant.forward-slash { transform: skewX(-22.5deg); } .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main, .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant { background: white; border: 3px solid white; color: blue; } .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main { border-right: none; } .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant { border-left: none; } .button-angular-wrapper-right { display: flex; isolation: isolate; position: relative; height: 40px; width: fit-content; } .button-angular-wrapper-right .button-angular-main { border-radius: 0 7px 7px 0; height: 100%; display: inline-grid; place-items: center; padding-inline: 8px 16px; margin-left: 13px; } .button-angular-wrapper-right .button-angular-slant { border-radius: 7px 0 0 7px; height: 100%; width: 24px; position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; } .button-angular-wrapper-right .button-angular-slant.back-slash { transform: skewX(22.5deg); } .button-angular-wrapper-right .button-angular-slant.forward-slash { transform: skewX(-22.5deg); } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main, .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant { border: 3px solid white; } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main { border-left: none; } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .icon-call { color: white; } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .cta-text { color: white; }.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant { border-right: none; }</pre> <pre class="brush:html;toolbar:false;"><div class="cta-button-group"> <div class="button-angular-wrapper-left button-angular-color-solid-white" href=""> <div class="button-angular-main"> <span class="cta-text"> Learn More Today </span> </div> <div class="button-angular-slant back-slash"> </div> </div> <div class="button-angular-wrapper-right button-angular-color-outline-white" href=""> <div class="button-angular-main"> <span class="cta-text tel-link-no"> 1800-1-5555 </span> </div> <div class="button-angular-slant back-slash"> </div> </div> </div></pre> <p><br /></p> <p>CodePen：https://codepen.io/katylar/pen/yLRjKaO</p> <p>它有效，但并不完美。我注意到某些浏览器在某些分辨率下会出现明显的伪影和奇怪的角/边缘。</p> <p>有什么好的解决办法吗？这不涉及面具（我总是很难使用面具，尺寸方面）？</p>

.button {
  color: white;
  background-color: black;
  text-align: center;
  text-transform: uppercase;
  padding: 5px 10px;
  margin: 11px;
  display: inline-block;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 2px solid black;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.button-left::before {
  content: " ";
  display: block;
  position: absolute;
  top: -2px;
  left: -12px;
  z-index: -10;
  background-color: black;
  width: 20px;
  height: 100%;
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  border-radius: 4px;
  border: 2px solid black;
}

.button-left:hover {
  background: rgba(0,0,0,0);
  box-sizing: border-box;
  border: 2px solid black;
  border-left: 2px solid rgba(0,0,0,0);
  color: black;
  border-top-left-radius: 0;
}

.button-left:hover::before {
  border-right: 2px solid rgba(0,0,0,0);
  background: rgba(0,0,0,0);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-content {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);  
  display: inline-block;
}

  Slanted Button