反転した境界線半径効果の作成

質問:

反転した境界線半径は作成できますか角が曲がって見える場所で効果が得られますinward?

答え:

ネイティブ CSS の border-radius プロパティでは、反転効果をもたらす負の値は許可されません。ただし、CSS を使用した別のアプローチは次のとおりです。

コンテナ内に 4 つの追加要素を追加し、コンテナの境界をわずかに超えて拡張されるようにします。これらの要素はページの背景色と一致する必要があり、その下にページのコンテンツがあるかのような錯覚を生み出します。これらの要素を角の周りに戦略的に配置し、境界線の半径を適用して反転効果を実現します。

コード スニペット:

#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; }