如何对角地连接盒子的阴影？
[英]how to connect the shadow of the box diagonally?
问题描述
I am trying to create a box like this. 
我正在尝试创建一个这样的盒子。 I am using the box-shadow property. 我正在使用box-shadow属性。 I have tried to skew but the whole box skews 我试图歪斜，但整个盒子倾斜
I want to make the shadow to connect diagonally to the box.
我想让阴影对角连接到盒子。 I am not getting to connect the shadow of the box diagonally to the box. 我没有把对角线的阴影连接到盒子上。 Please suggest me. 请建议我。
#one { width: 400px; height: 200px; background-color: yellow; box-shadow: -10px 10px black; margin: 10% 0 10% 10%; transform: rotate(1.5deg) translateX(10px) translateY(15px) skewX(4deg) skewY(-4deg); }
<body> <div id="one"> </div> </body>
1 个解决方案
解决方案1
8 已采纳 2015-12-21 07:05:59
You don't need to use any transform method to achieve this. 您不需要使用任何变换方法来实现此目的。 All you have to do is use box-shadow 您所要做的就是使用box-shadow
This is the structure of box-shadow 这是盒子阴影的结构
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
where you are suppose to change the [horizontal offset] and [vertical offset] 你想改变[horizontal offset]和[vertical offset]
Here is how you should do 这是你应该怎么做
PS: Do the proper adjustments until you get desired output. PS：进行适当的调整，直到获得所需的输出。
.box { width: 300px; margin: 50px auto; height: 100px; background: red; box-shadow: -1px 0px 0px #000, -0px 1px 0px #000, -2px 1px 0px #000, -1px 2px 0px #000, -3px 2px 0px #000, -2px 3px 0px #000, -4px 3px 0px #000, -3px 4px 0px #000, -5px 4px 0px #000, -4px 5px 0px #000, -6px 5px 0px #000, -5px 6px 0px #000, -7px 6px 0px #000, -6px 7px 0px #000, -8px 7px 0px #000, -7px 8px 0px #000, -9px 8px 0px #000, -8px 9px 0px #000, -10px 9px 0px #000, -9px 10px 0px #000, -11px 10px 0px #000, -10px 11px 0px #000, -12px 11px 0px #000, -11px 12px 0px #000, -13px 12px 0px #000, -12px 13px 0px #000, -14px 13px 0px #000, -13px 14px 0px #000, -15px 14px 0px #000, -14px 15px 0px #000, -16px 15px 0px #000, -15px 16px 0px #000, -17px 16px 0px #000, -16px 17px 0px #000, -18px 17px 0px #000, -17px 18px 0px #000, -19px 18px 0px #000, -18px 19px 0px #000, -20px 19px 0px #000, -19px 20px 0px #000, -21px 20px 0px #000, -20px 21px 0px #000, -22px 21px 0px #000, -21px 22px 0px #000, -23px 22px 0px #000, -22px 23px 0px #000, -24px 23px 0px #000, -23px 24px 0px #000, -25px 24px 0px #000, -24px 25px 0px #000, -26px 25px 0px #000, -25px 26px 0px #000, -27px 26px 0px #000, -26px 27px 0px #000, -28px 27px 0px #000, -27px 28px 0px #000, -29px 28px 0px #000, -28px 29px 0px #000, -30px 29px 0px #000, -29px 30px 0px #000; }
<div class="box"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.