3

在为现有网站进行新设计时，我必须在“透视”中绘制一些元素。

通过使用一些伪元素:before，:after制作起来很容易，但是添加的角是固定颜色（白色），可以与背景（白色）搭配，但不能与其他元素（图片，其他背景色块）搭配. 不幸的是:outside，:before(2)并且 :after(2)似乎不起作用。

白角的演示

那么我怎样才能使以下菜单CSS带有透明角（没有 gif、png 或添加一些span）？

> 小提琴演示

HTML

<div class="relief">Some content</div>

CSS

.relief {
position:relative;
border-left:10px solid #CCC;
border-bottom:10px solid #CCC;
border-right:1px solid #CCC;
border-top:1px solid #CCC;
padding:10px;
background:#EDEDED;}

.relief:before, .relief:after {
content:"";
border:10px solid transparent;
position:absolute;
display:block;
z-index:10;}

.relief:before {
left:-10px;
top:-10px;
border-left:10px solid #FFF;
border-top:10px solid #FFF;}

.relief:after {
right:-10px;bottom:-10px;
border-right:10px solid #FFF;
border-bottom:10px solid #FFF;}

我用另一个系统为它做的最好的，做了一个左下角的透明角和一个左上角的白色边框，我不想显示：2nd fiddle demo

任何帮助将不胜感激。

4

1 回答 1

2

这是一个如何使用纯 CSS 完成的示例。请务必添加任何供应商前缀。

div {
    box-shadow: -1px 1px 0px 1px rgba(0,0,0,0.5), -2px 2px 0px 1px rgba(0,0,0,0.5), -3px 3px 0px 1px rgba(0,0,0,0.5), -4px 4px 0px 1px rgba(0,0,0,0.5), -5px 5px 0px 1px rgba(0,0,0,0.5)
}

小提琴：http: //jsfiddle.net/Z8zcW/

于 2013-04-29T02:04:00.927 回答