如何透過 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>