Tajuk yang ditulis semula ialah: Bentuk CSS 3: "Bulatan Terbalik" atau "Potong Bulatan"

Question

Saya mahu mencipta bentuk yang akan saya gambarkan sebagai "anti bulatan":

Imej agak tidak tepat kerana garis hitam harus diteruskan di sepanjang sempadan luar elemen div.

Berikut ialah demo yang saya ada sekarang: http://jsfiddle.net/n9fTF/

Adakah boleh menggunakan CSS

Answer 1

Saya tidak dapat mengetahui daripada lukisan anda berapa bulat yang anda mahukan mata, tetapi ada satu kemungkinan: http://jsfiddle.net/n9fTF/6/

Jika titik perlu lebih bulat, anda perlu meletakkan beberapa bulatan di hujungnya supaya ia sebati dengan sudu.

Answer 2

Kemas kini: Pilihan kecerunan latar belakang jejari CSS3

(Untuk penyemak imbas yang menyokongnya - diuji dalam FF dan Chrome - IE10, Safari juga harus berfungsi).

Salah satu "masalah" dengan jawapan asal saya ialah situasi tanpa latar belakang yang kukuh. Kemas kini ini mencipta kesan yang sama, membenarkan "jurang" telus antara bulatan dan potongan terbaliknya.

Lihat contoh biola.

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

Jawapan asal

Mengambil lebih banyak usaha daripada yang saya jangkakan untuk memastikan pengindeksan-z berfungsi dengan baik (Ini nampaknya mengabaikan indeks-z negatif), namun, Ini memberikan rupa bersih yang bagus (dalam ujian pertengahan 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;
}