使用css創建折角卡片

我想創建一張顯示在下圖中的卡片。我有一個fiddle我創建了一張樣卡。下面的代碼生成唯一的平面直角卡使用css創建折角卡片

.card { 
    height: 300px; 
    background:none repeat scroll 0 0 #FFFFFF; 
    box-shadow: 1px 1px 4px 4px threedshadow; 
    width:300px; 
    height:200px; 
    }

enter image description here

請對此有什麼想法？

來源

2014-05-06 Ashok Dongare

.card { 
    position: relative; 
    width: 30%; 
    height: 300px; 
    padding: 1em 1.5em; 
    margin: 2em auto; 
    color: #fff; 
    background: #97C02F; 
} 
.card:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-width: 0 16px 16px 0; 
    border-style: solid; 
    border-color: #658E15 #fff; 
}

Demo

你可以用上面的發揮並嘗試使用.card:after的左下角和右上角。

來源

2014-05-06 05:59:24

感謝您的回覆。你在這裏使用彩色卡片，所以能夠區分卡片從白色背景。但我的要求是在白色背景上的白卡。那麼我們怎麼做到這一點？ –

有許多白色的變體，你可以從這裏選擇：http：//html-color-codes.info/這個怎麼樣：http://jsfiddle.net/chankeypathak/7kMMc/2/。你可以嘗試的另一件事是將'div'保持爲白色，但是用'灰色'或黑色創建其邊框。 –

感謝哥們。現在它適合我的要求，顏色方案几乎沒有變化。 –

使用css創建折角卡片

回答

相關問題