I have created a unique design that resembles a large arrow pointing to the right.
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-bottom: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-top: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
While I understand that this may not be considered "proper," I am currently experimenting with different techniques.
I am curious if there is a way to add a drop shadow to the lower edge of the arrow using this border method. One idea I had was to place another div underneath, but in order for this technique to be effective, the other borders need to remain visible.
If it's not possible to achieve the desired effect using the border approach, would I be limited to using an image as the front of the arrow?
Any suggestions or insights are greatly appreciated.