添加阴影有一定角度怎么做

Question

设计图效果：

实现效果：

使用阴影不能实现角度要怎么办呢？有没有朋友知道呢？

Answer 1

多个阴影往右下排起来
看起来就是连续的

例如 ,目标位置是3px,3px

则写成

box-shadow: 1px 1px 0px 0px red,
            2px 2px 0px 0px red,
            3px 3px 0px 0px red;

第四个值。(就是上面red前的那个0px;)
取正值时，阴影扩大；
取负值时，阴影收缩。
默认为0，此时阴影与元素同样大

你调整一下
右边也能达到效果

box-shadow: 0px 2px 0px -1px red,
            0px 4px 0px -2px red,
            0px 6px 0px -3px red;;

Answer 2

用伪元素实现.

 .box{
      width: 300px;
      height: 50px;
      position: relative;
    }

    .box:after{
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      top: 0;
      left: 0;
      background-color: #fdd420;
    }

    .box:before{
      content: '';
      position: absolute;
      bottom: 0;
      right: 2px;
      top: 0;
      left: 2px;
      border-radius: 4px;
      box-shadow:  0 2px  0 2px  rgba(181,110,5, 1);
    }

Answer 3

谢谢大神们，实现的办法有很多种，但是个人觉得最好的就是 FX052 的办法。