如何通过 CSS 创建一个一侧有角度且圆角的盒子？

Question

<p>我目前发现自己需要制作这样的东西。</p> <p>我的第一个想法是使用clip-path，但是圆角很难拉下来，而且当按钮因其内容而改变宽度时很难保持22.5度。</p> <p>所以我最终将每个按钮制作为两个 <em>div</em>，其中一个 div 倾斜 22.5 度并与常规矩形 div 重叠。然后我为两者添加了边框半径。</p> <p><br />></p>

body {
  行高：0；
  字体大小：16px；
  背景颜色：黑色；
}

.cta-按钮组{
  显示：柔性；
  间隙：2rem；
  对齐项目：居中；
}

.button-angular-wrapper-left {
  显示：柔性；
  隔离的英文
  位置：相对；
  高度：40px；
  宽度：适合内容；
}

.button-Angular-wrapper-left .button-Angular-main {
  边框半径：7px 0 0 7px；
  高度：100%；
  显示：内联网格；
  地点项目：中心；
  内边距：8px 16px；
  右边距：13px；
  过渡：背景颜色 50ms；
}

.button-Angular-wrapper-left .button-Angular-slant {
  边框半径：0 7px 7px 0；
  高度：100%；
  宽度：24px；
  位置：绝对；
  右：0；
  顶部：0；
  底部：0；
  z 索引：-1；
  过渡：背景颜色 50ms；
}

.button-Angular-wrapper-left .button-Angular-slant.back-slash {
  变换：skewX(22.5deg)；
}

.button-Angular-wrapper-left .button-Angular-slant.forward-slash {
  变换：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 {
  背景：白色；
  边框：3px 纯白色；
  颜色: 蓝色;
}

.button-Angular-wrapper-left.button-Angular-color-solid-white .button-Angular-main {
  右边界：无；
}

.button-Angular-wrapper-left.button-Angular-Color-Solid-White .Button-Angular-Slant {
  左边框：无；
}

.button-Angular-wrapper-right {
  显示：柔性；
  隔离的英文
  位置：相对；
  高度：40px；
  宽度：适合内容；
}

.button-Angular-wrapper-right .button-Angular-main {
  边框半径：0 7px 7px 0；
  高度：100%；
  显示：内联网格；
  地点项目：中心；
  内边距：8px 16px；
  左边距：13px；
}

.button-Angular-wrapper-right .button-Angular-slant {
  边框半径：7px 0 0 7px；
  高度：100%；
  宽度：24px；
  位置：绝对；
  左：0；
  顶部：0；
  底部：0；
  z 索引：-1；
}

.button-Angular-wrapper-right .button-Angular-slant.back-slash {
  变换：skewX(22.5deg)；
}

.button-Angular-wrapper-right .button-Angular-slant.forward-slash {
  变换：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 {
  边框：3px 纯白色；
}

.button-Angular-wrapper-right.button-Angular-color-outline-white .button-Angular-main {
  左边框：无；
}

.button-Angular-wrapper-right.button-Angular-color-outline-white .button-Angular-main .icon-call {
  白颜色;
}

.button-Angular-wrapper-right.button-Angular-color-outline-white .button-Angular-main .cta-text {
  白颜色;
}.button-Angular-wrapper-right.button-Angular-Color-Outline-White .Button-Angular-Slant {
  右边界：无；
}</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">
        立即了解更多信息
      </span>
    

Answer 1

我已经用伪元素尝试过这种方法。该形状的左侧是一个 ::before 元素，为了实现悬停效果，我将按钮和伪元素上的特定边设为不可见，并更改了特定角的边框半径。

.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;
}

<div class="button button-left">
  <span class="button-content">Slanted Button</span>
</div>