CSS で境界線の半径を反転するにはどうすればよいですか?

反転境界線半径: CSS と非ネイティブ ソリューションの探求

革新的なデザインを追求する中で、「反転境界線」を作成するという問題が生じます。 " 境界半径が頻繁に発生します。 Web デザインではボーダー半径が一般的ですが、通常は要素の内側に丸い角が適用されます。ただし、提供された画像の黒色の矢印で示されているように、外側の角を丸くする効果を実現するには、別のアプローチが必要です。

ネイティブ CSS の制限

ネイティブCSS プロパティ border-radius は負の値をサポートしていないため、効果を直接反転することはできません。ユーザーの返信で提案されているようなライブラリは、目的の外観を模倣する追加の HTML 要素を作成することでこの効果を実装します。

純粋な CSS アプローチ

CSS のみを使用すると、次のことが可能です。追加の要素を細心の注意を払って配置することで、反転したボーダー半径の錯覚を作成します。

1. コンテナ (#main) を定義し、絶対配置された 4 つの子要素 ​​(divs) を追加します。
2. 背景を設定します。ページの背景に合わせて子要素の色を設定します。
3. 負のマージンを使用して子要素をコンテナの少し外側に配置します。
4. 子要素に境界線の半径を適用して、目的の効果を作成します。

例:

<code class="html"><div id="main">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div></code>

<code class="css">#main {
  margin: 40px;
  height: 100px;
  background-color: #004C80;
  position: relative;
  overflow: hidden;
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }</code>

このアプローチは、ネイティブボーダーの制限を認識しながら、反転ボーダー半径に対する純粋な CSS ソリューションを提供します。半径。

以上がCSS で境界線の半径を反転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。