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