How to make beveled corners with drop shadow?

0 like 0 dislike
6 views
Hello!
Heaps of answers are found but all are not suitable. There is a input with the border radius and the bevelled corner. When you focus on it there is still a shadow. How to do all this? screens made according to the current implementation.

5aec575ecbf06088616841.png5aec57ea496a8358643636.jpeg
by | 6 views

4 Answers

0 like 0 dislike
by
0 like 0 dislike
I'm afraid the normal solution here is to beat the designer.

In essence, try to ask this "cutting off" the corner element of shadow with only one right side. jsfiddle.net/agusesetiyono/1kwhsfvo/?utm_source=we... or here https://codepen.io/iiil/pen/FAqjn so somehow. Perhaps in your case it will be an inner shadow. Can help
by
0 like 0 dislike
back to back two blocks of the same height, one with transform:skew, the second without. each parent block with overflow:hidden, which clips the first block right shade, and the second left. by having a gap under the shadow on all sides, except that which is cut off.
by
0 like 0 dislike
Difficult... My suggestion is to make your own shadow and not to use box-shadow.
\rhttps://codepen.io/aliencash/pen/vjJVgm?editors=1100
Here I create the substrate and blur it using filter: blur. The calculation of the size, adaptability for yourself please, I'm only the principle shown.
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
33,910 users