CSS3倒圓角

Question

有沒有辦法在CSS3中做一個倒圓角，大概就像下面（粗略）圖中的左下角？

/-------\
|       |
|       |
|       |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded

也許邊界半徑可以與這種技術相結合？

編輯：我不是在尋找一個講話泡泡，而只是一種彎曲左下角點右側的方法。

Answer 1

嗯，這是純粹的瘋狂，但肯定有辦法實現這個:-)不是跨瀏覽器，但讓我們看看：

我們的加價：

<div id="bubble">
    <p>This is madness!</p>
</div>

我們的CSS：

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;/* well, madness it is! */
    }
#bubble:before {
    content:'';
    border:20px solid;
    border-color:#fff transparent transparent;
    position:absolute;
    top:110px;
    left:25px;
    z-index:2;
}
#bubble:after {
    content:'';
    border:20px solid;
    border-color:#000 transparent transparent;
    position:absolute;
    top:111px;
    left:25px;
    z-index:1;
}

結果： http ： //jsfiddle.net/MrLWY/

我只在Firefox 3.6.3中測試了這個，但想法很清楚:-)

這里有兩個：

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    position:relative;
    -webkit-border-radius:20px 20px 20px 0;
    -moz-border-radius:20px 20px 20px 0;
    border-radius:20px 20px 20px 0;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;
    }
#bubble:before {
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    border-left:1px solid #000;
    position:absolute;
    top:100px;
    left:-1px;
}
#bubble:after {
    content:'';
    -webkit-border-radius:20px 0 0 0;
    -moz-border-radius:20px 0 0 0;
    border-radius:20px 0 0 0;
    border:solid #000;
    border-width:1px 0 0 1px;
    width:20px;
    height:19px;
    position:absolute;
    top:100px;
    left:0;
}

結果： http ： //jsfiddle.net/ajeN7/

也許這可以通過多種方式得到加強：

• 讓它跨瀏覽器（+ webkit和opera，至少）
• 它可以在IE中工作，但沒有舍入，借助於http://code.google.com/p/ie7-js/之類的東西（為了使生成的內容能夠工作）。
• 了解它如何在靈活的高度下工作。
• 更改font-family聲明:-)

Answer 2

我還不能評論，但所以這是一個新的答案（關於Gryzzlys的回答）：

Gryzzlys的第一個例子沒有處理不同的背景顏色（背景和氣泡）。

但第二個確實如此。 以下是應用背景顏色的示例：

http://jsfiddle.net/tGnfb/

（我還添加了border-radius屬性，以便為Firefox之外的其他瀏覽器渲染邊框）。

Answer 3

這實現了FF的效果。 對其他瀏覽器使用適當的border-radius變體。 基本上你使用3 div系統，一個與背景顏色相同。 僅適用於平面顏色的背景。

<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>

而CSS：

body
    {
    background-color:red;
    }

.top
    {
    display: block;
    width: 200px;
    height: 50px;
    background-color:white;
    padding:5px;

    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    }

.bottom
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;    
    }

.bottom2
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;  
    -moz-border-radius-topleft:20px;
    }

Answer 4

有些方法可以通過使用CSS來解決這個問題。 我決定使用一種技術來制作標簽 - 但可以很容易地適應語音泡泡。

我在這里介紹了如何在CSS中創建反向邊界半徑的基本示例（此處） 。 這使用了一個大小為Border的技巧來使用內部，你可能需要做一些定位才能讓它正常工作，但是你可以看到它的可能性。

Answer 5

如果你想要實現那種外觀（一個語音氣球），最好只使用一個圖像:)