CSS を使用して、片側に角度があり、角が丸いボックスを作成するにはどうすればよいですか?

Question

<p>現在、このようなものを作成する必要があることに気づきました。 </p> <p>最初はクリップパスを使おうと思ったのですが、角が丸くなっているので剥がすのが難しく、内容によってボタンの幅が変わったときに22.5度を維持するのが難しいです。 </p> <p>そこで、最終的に各ボタンを 2 つの <em>div</em> として作成し、1 つの div を 22.5 度傾けて、通常の長方形の div に重ねました。次に、両方に境界線の半径を追加しました。</p> <p><br /></p> <pre class="brush:css;toolbar:false;">body { 行の高さ: 0; フォントサイズ: 16px; 背景色: 黒; } .cta-ボタングループ { ディスプレイ: フレックス; ギャップ: 2レム; 整列項目: 中央; } .button-angular-wrapper-left { ディスプレイ: フレックス; 隔離：隔離する。 位置: 相対的; 高さ: 40ピクセル; 幅: コンテンツに合わせて; } .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 { 変換: スキュー X(22.5 度); } .button-angular-wrapper-left .button-angular-slant.forward-slash { 変換: スキュー X(-22.5 度); } .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main, .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant { 背景: 白; 境界線: 3 ピクセルの白一色。 青色; } .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 { ディスプレイ: フレックス; 隔離：隔離する。 位置: 相対的; 高さ: 40ピクセル; 幅: コンテンツに合わせて; } .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 { 変換: スキュー X(22.5 度); } .button-angular-wrapper-right .button-angular-slant.forward-slash { 変換: スキュー X(-22.5 度); } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main, .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant { 境界線: 3 ピクセルの白一色。 } .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> </div> <div class="button-angular-slant バックスラッシュ"> </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 バックスラッシュ"> </div> </div> </div></pre> <p><br /></p> <p>コードペン：https://codepen.io/katylar/pen/yLRjKaO</p>

これは有効ではありますが、完全ではありません。私たちは、特定の視聴者が特定の周波数で顕著な影響と奇妙な角/角を示す可能性があることに注意しました。 <p>何か良い解決法吗はありますか？これは面具（我总是很难使用面具、尺寸面）に関係しませんか？</p>

Answer 1

私は疑似要素を使用してこのアプローチを試しました。図形の左側は ::before 要素で、ホバー効果を実現するために、ボタンと疑似要素の特定の辺を非表示にし、特定の角の境界線の半径を変更しました。

リーリー リーリー