44

「逆円」と表現する形状を作成したいと思います。

CSSシェイプ

黒い線がdiv要素の外側の境界に沿って続く必要があるため、画像はどういうわけか不正確です。

これが私が現在持っているもののデモです：http：//jsfiddle.net/n9fTF/

画像がなくてもそれは可能CSSですか？

4

6 に答える 6

56

更新：CSS3放射状背景グラデーションオプション

（FFおよびChromeでテストされたそれをサポートするブラウザーの場合-IE10、Safariも機能するはずです）。

私の最初の答えの「問題」の1つは、彼らが取り組んでいる確かな背景がない状況です。この更新により、同じ効果が作成され、円とその逆カットアウトの間に透明な「ギャップ」が可能になります。

フィドルの例を参照してください。

CSS

.inversePair {
    border: 1px solid black;
    display: inline-block;    
    position: relative;    
    height: 100px;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}

#a {
    width: 100px;
    border-radius: 50px;
    background: grey;
    z-index: 1;
}

#b {
    width: 200px;
    /* need to play with margin/padding adjustment
       based on your desired "gap" */
    padding-left: 30px;
    margin-left: -30px;
    /* real borders */
    border-left: none;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    /* the inverse circle "cut" */
    background-image: -moz-radial-gradient(
        -23px 50%, /* the -23px left position varies by your "gap" */
        circle closest-corner, /* keep radius to half height */
        transparent 0, /* transparent at center */
        transparent 55px, /*transparent at edge of gap */
        black 56px, /* start circle "border" */
        grey 57px /* end circle border and begin color of rest of background */
    );
    background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

元の回答

z-indexingを機能させるために予想以上の労力を費やしました（これは負のz-indexを無視しているようです）が、これにより見栄えが良くなります（IE9、FF、Chromeでテスト済み）。

HTML

<div id="a" class="inversePair">A</div>
<div id="b" class="inversePair">B</div>

CSS

.inversePair {
    border: 1px solid black;
    background: grey;
    display: inline-block;    
    position: relative;    
    height: 100px;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}

#a {
    width: 100px;
    border-radius: 50px;
}

#a:before {
    content:' ';
    left: -6px;
    top: -6px;
    position: absolute;
    z-index: -1;
    width: 112px; /* 5px gap */
    height: 112px;
    border-radius: 56px;
    background-color: white;
} 

#b {
    width: 200px;
    z-index: -2;
    padding-left: 50px;
    margin-left: -55px;
    overflow: hidden;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#b:before {
    content:' ';
    left: -58px;
    top: -7px;
    position: absolute;
    width: 114px; /* 5px gap, 1px border */
    height: 114px;
    border-radius: 57px;
    background-color: black;
}
于 2012-05-08T17:04:50.547 に答える
8

図面からポイントがどれだけ丸みを帯びているかはわかりませんが、1つの可能性があります：http： //jsfiddle.net/n9fTF/6/

ポイントをもっと丸くする必要がある場合は、大きなスクープと混ざり合うように、端にいくつかの円を配置する必要があります。

于 2012-05-08T15:27:38.997 に答える
8

別のアプローチ：ボックスシャドウ

このアプローチでは、IE9 +（canIuse）でサポートされているCSSボックスシャドウを使用します。

デモ

出力：

ボックスシャドウを使用したはめ込み曲線を使用したCSSシェイプ

HTML：

<div id="a">
    <div id="b"></div>
</div>

CSS：

#a{
    overflow:hidden;
    border-radius:20px;
    position:relative;
    display:inline-block;
}
#a:before, #a:after{
    content:'';
    width: 100px;
    border-radius: 50%;
}
#a:before {
    height: 100px;
    float:left;    
    border: 1px solid black;
    background: grey;
}
#a:after {
    position:absolute;
    left:14px; top:-6px;
    height:114px;
    box-shadow: 1px 0px 0px 0px #000, 110px 0px 0px 68px #808080;
    background:none;
    z-index:-1;
}
#b {
    width: 200px;
    height: 100px;
    background:none;
    margin-left:-15px;
    border: 1px solid black;
    border-left:none;
    float:left;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
于 2014-07-14T11:14:51.880 に答える
1

これは非常に興味深い質問です。最近、CSSで逆境界半径を作成する方法に関するチュートリアルを投稿しました（ここ） 。これは、あなたのケースに簡単に適合させることができると思います。

秘訣は、非常に単純な概念、つまり非常に太い境界線を使用して、逆境界線を生成するスパンを作成することです。そして、それらを非表示にして内側のセクションを使用します。提供されているスクリプトに加えて、右上隅のみを使用しているため、左上隅に別の境界半径を追加する必要があります。絶対位置で目的のアイテムの左側にスパンを揃え、それに応じてスパンの高さ/幅を大きくすると、逆の境界半径が得られます。

于 2012-07-14T12:32:15.347 に答える
0

他の誰かが私が見つけたものからどこかでそれをしました...

JSFiddle： http: //jsfiddle.net/ajeN7/

と質問：CSS3逆丸角

うまくいけば、それが役立ちます！

于 2012-05-08T15:20:25.060 に答える
0

オフセットで灰色の円の後ろにある絶対位置のフチなしの白い円を導入します。暗い円のzインデックスを設定して、白い円の上に配置されるようにする必要があります。

#c {
    position: absolute;
    border: 0;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: white;
}

デモ。 </ p>

于 2012-05-08T15:27:43.980 に答える