在css中創建凹角

6

這裏是我將如何解決這個一個很好的例子：

HTML：

<div class='concave'> 
    <div class='topleftconcave'></div> 
    <div class='botleftconcave'></div> 
</div>

CSS：

div.concave { 
    background:blue; 
    width:150px; 
    height:120px; 
    position:relative; 
} 
div.topleftconcave { 
    position:absolute; 
    background:white; 
    width:25px; 
    height:35px; 
    border-bottom-right-radius:500px; 
} 
div.botleftconcave { 
    position:absolute; 
    background:white; 
    width:25px; 
    height:35px; 
    bottom:0; 
    left:0; 
    border-top-right-radius:500px; 
}

來源

2012-09-16 14:56:02

+0

這很快@Korvin。做得好！這是美麗的，這正是我所追求的！ – Mick

+0

該選項創建額外的元素。事實上，它可以解決，而無需添加任何額外的元素。 –

+1

從技術上說不可以。:: before和:: after方法限於兩個凹角，正如我在David Thomas的例子中提到的那樣，這就是我選擇添加元素的原因。 –

0

我知道的唯一方法是添加在四個角上的div，每一個積極的邊界半徑。

來源

2012-09-16 14:55:47 jazmit

2

如果你不想加HTML的額外元素，只需要設計兩個角落和能夠使用生成的內容，而不是，我建議：

.concave { 
    position: relative; 
    width: 10em; 
    height: 3em; 
    line-height: 3em; 
    margin: 1em auto; 
    padding: 0.5em; 
    background-color: #00f; 
    color: #fff; 
} 

.concave::before { 
    content: ''; 
    position: absolute; 
    top: -1em; 
    left: -1em; 
    border: 1em solid #fff; 
    border-radius: 1em; 
} 

.concave::after { 
    content: ''; 
    position: absolute; 
    bottom: -1em; 
    left: -1em; 
    border: 1em solid #fff; 
    border-radius: 1em; 
}

JS Fiddle demo。

來源

2012-09-16 14:58:05

+0

我打算走這條路線，但這不幸的是不允許所有四個角落，只有兩個。 –

+0

有一個輕微的問題，是的。 –

+0

謝謝@David。這是一個很棒的代碼。 – Mick

8

利·貝羅有description of how to do this：

通過使用徑向漸變，你可以模擬圓角與負半徑。你可以在沒有任何額外的元素的支持下做到這一點。它有點棘手。

如果不支持CSS漸變，它也會回落到純色背景。它將在Firefox 3.6，最新的Webkit和 - 喜歡Opera 11.10（他們宣佈漸變支持即將推出）。您也可以添加-webkit-gradient()背景，以使可以在幾乎所有當前正在使用的Webkit版本中運行，但是我警告您：這不會很容易，我個人拒絕花費我的時間超過5分鐘時間花費與那個非標準的東西。

Here是其實施的現場演示。

來源

2012-09-16 15:05:18

+0

哇！這實際上允許我們只使用一個div並且具有背景圖像。太棒了。 – Mick

+0

謝謝@帕特:)，我認爲這是更好的方式來做到這一點。這比其他人少創頭痛。考慮給這個+1。 –

+0

確實，它在Safari中看起來有別名。你能解釋一下嗎：'不要把顏色停在完全相同的位置上。此代碼可以在Safari和IE中正常工作嗎？ – Mick

0

怎麼樣CSS3的邊界圖像屬性？這裏大文章：

http://css-tricks.com/understanding-border-image/

這將意味着舊的瀏覽器如IE 7-8的支持，但如果你能忍受的還是找一個變通，這將很好地工作。

我最近做了自己的邊界圖像來做這件事。

來源

2012-09-16 15:38:19 Glen

在css中創建凹角

回答

相關問題