箱の影を斜めにどのように接続するのですか？

このようなボックスを作成しようとしています。私はbox-shadowプロパティを使用しています。私がスキューしようとしていますが、全体のボックスは私が箱に斜めに接続するために影を作りたい箱の影を斜めにどのように接続するのですか？

をスキュー。箱の影を斜めにボックスに接続することはできません。私に提案してください。

#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>

出典

2015-12-21 user

誰もが問題を把握できるように、ここにあなたのコードを表示します。 –

@ChoncholMahmudコードを見てください、私は私の投稿を編集しました – user

あなたはこれを達成するために、任意の変換方法を使用する必要はありません。あなたがしなければならないのは、これはあなたが変更すると仮定されているボックスシャドウ

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

の構造で使用ボックスシャドウ

で[horizontal offset]と[vertical offset]ここ

は、あなたが何をすべきかであります

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>

出典

2015-12-21 07:05:59

ありがとう、ありがとう、非常に、ありがとう、 – user

は、 – user

あなたの貴重な提案をお寄せいただきありがとうございます – user

箱の影を斜めにどのように接続するのですか？

答えて

関連する問題