CSS:在方框的右侧旋转投影。-CSS:Rotateddropshadowonrightsideofbox

9  

You can achieve this with CSS3: box-shadow and transform.

可以通过CSS3: box-shadow和transform来实现这一点。

In the example below the box-shadow is applied to a pseudo element of .menuContainer which sits underneath the .menu element and is rotated by 1° using CSS3s rotate() transform property.

在下面的例子中不必是应用于一个伪元素.menuContainer坐落在.menu元素和使用css3旋转旋转1°()变换性质。

html,body {  /* This is only here to allow the menu to stretch to 100% */
    height: 100%;
    margin: 0;
}
.menuContainer {
    position: relative;    
    height: 100%;
    width: 100px;
}
.menuContainer::after {
    content: "";
    position: absolute;   
    z-index: 1; 
    top: -10px;
    bottom: 0;
    left: -7px;
    background: rgba(0,0,0,0.3);
    box-shadow: 10px 0 10px 0 rgba(0,0,0,0.3);
    width: 100px;    
    transform: rotate(1deg);
}
.menu {
    background: #f00;
    height: 100%;
    width: 100px;
    position: relative;
    z-index: 2;
}

1  

You could fake it with a pseudo-element rather than using a box-shadow as follows

您可以使用伪元素来伪造它，而不是像下面这样使用框形阴影

JSfiddle Demo

JSfiddle演示

CSS

CSS

#main-menu {
    width: 50px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position: fixed;
    background-color: pink;
}

#main-menu:after {
    content:"";
    position: absolute;
    top:0;
    left:100%;
    height:100%;
    width:5%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 100%);
}