Bagaimana untuk membuat kotak dengan sudut bersudut dan bulat pada satu sisi melalui CSS?

Question

Saya pada masa ini mendapati diri saya perlu membuat sesuatu seperti ini.

Pemikiran pertama saya ialah menggunakan laluan klip, tetapi sudut bulat sukar ditarik keluar, dan sukar untuk mengekalkan 22.5 darjah apabila butang berubah lebar disebabkan kandungannya.

Jadi saya akhirnya menjadikan setiap butang sebagai dua div, dengan satu div condong 22.5 darjah dan bertindih div segi empat tepat biasa. Kemudian saya menambah jejari sempadan pada kedua-duanya.

body {
  ketinggian garisan: 0;
  saiz fon: 16px;
  warna latar belakang: hitam;
}

.cta-button-group {
  paparan: flex;
  jurang: 2rem;
  align-item: tengah;
}

.button-angular-wrapper-left {
  paparan: flex;
  pengasingan: mengasingkan;
  kedudukan: relatif;
  ketinggian: 40px;
  lebar: muat-kandungan;
}

.button-angular-wrapper-left .button-angular-main {
  jejari sempadan: 7px 0 0 7px;
  ketinggian: 100%;
  paparan: inline-grid;
  tempat-item: pusat;
  padding-inline: 8px 16px;
  jidar kanan: 13px;
  peralihan: warna latar belakang 50ms;
}

.button-angular-wrapper-left .button-angular-slant {
  jejari sempadan: 0 7px 7px 0;
  ketinggian: 100%;
  lebar: 24px;
  jawatan: mutlak;
  kanan: 0;
  atas: 0;
  bawah: 0;
  indeks-z: -1;
  peralihan: warna latar belakang 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 {
  latar belakang: putih;
  sempadan: 3px putih pepejal;
  warna: biru;
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main {
  sempadan-kanan: tiada;
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant {
  sempadan-kiri: tiada;
}

.button-angular-wrapper-right {
  paparan: flex;
  pengasingan: mengasingkan;
  kedudukan: relatif;
  ketinggian: 40px;
  lebar: muat-kandungan;
}

.button-angular-wrapper-right .button-angular-utama {
  jejari sempadan: 0 7px 7px 0;
  ketinggian: 100%;
  paparan: inline-grid;
  tempat-item: pusat;
  padding-inline: 8px 16px;
  jidar-kiri: 13px;
}

.button-angular-wrapper-right .button-angular-slant {
  jejari sempadan: 7px 0 0 7px;
  ketinggian: 100%;
  lebar: 24px;
  jawatan: mutlak;
  kiri: 0;
  atas: 0;
  bawah: 0;
  indeks-z: -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 {
  sempadan: 3px putih pepejal;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main {
  sempadan-kiri: tiada;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .icon-call {
  warna: putih;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .cta-text {
  warna: putih;
}.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant {
  sempadan-kanan: tiada;
}

<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">
        Ketahui Lebih Lanjut Hari Ini
      </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>

CodePen：https://codepen.io/katylar/pen/yLRjKaO

它有效，但并不完美。我注意到某些浏览器在某些分辨率下会出率下会出现下会出现下会出现下会出现下会出现下会出现明明出现明明的话缘。

有什么好的解决办法吗？这不涉及面具（我总是很难使用面具，尺寸

Answer 1

Saya telah mencuba pendekatan ini dengan elemen pseudo. Bahagian kiri bentuk ialah elemen ::before, dan untuk mencapai kesan tuding saya membuat bahagian tertentu pada butang dan unsur pseudo tidak kelihatan dan menukar jejari sempadan sudut tertentu.

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