使用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创建折角卡片

回答

相关问题