All geek questions in one place

Triangle with shadow using css

CSS

.caret-bottom { display: inline-block; width: 0; height: 0; vertical-align:top; content: ""; border-top: 9px solid #FFFFFF; border-right: 7px solid transparent; border-left: 7px solid transparent; margin-top: 13px; margin-left: 4px; }

HTML CODE

 <div class="caret-left"></div>

I need a shadow bottom side for this triangle, as a three-dimensional effect.

+6
source share
3 answers

 .triangle { width: 100px; height: 100px; position: relative; overflow: hidden; box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5); } .triangle:after { content: ""; position: absolute; width: 50px; height: 50px; background: #999; -webkit-transform: rotate(45deg); top: 75px; left: 25px; box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5); } 
 <div class="triangle"></div>

Demo

http://jsfiddle.net/w9Zgc/

0
source

Hi, the post is a little old, but there is an example that I used. Link to the demo with the code.

 .triangle { position: relative; background-color: white; opacity: 0.7; text-align: left; } .triangle:before, .triangle:after { content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after { width: 7em; height: 7em; border-top-right-radius: 30%; } .triangle { transform: rotate(-90deg) skewX(-30deg) scale(1, .866); } .triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%); } .triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%); } .triangle { filter: drop-shadow(4px 7px 10px rgb(0, 0, 0)); -webkit-filter: drop-shadow(4px 7px 10px rgb(0, 0, 0)); } 
 <html> <body> <div class="triangle-wrap"> <div class='triangle'></div> </div> </body> </html>
+1
source

try this one i think this will help you

 .caret-bottom { display: inline-block; width: 0; height: 0; content: ""; border-top: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent; position: relative; } .caret-bottom:before { width: 0; height: 0; content: ""; border-top: 10px solid #000; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; z-index: 1; top: -12px; left: -10px; } 
 <div class="caret-bottom"></div>
0
source

Source: https://habr.com/ru/post/943503/

More articles:


All Articles