Menu
.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;
}
<div class="caret-left"></div>
I need shadow bottom side for this triangle like a 3D effect.
753
Assuming we're cool with CSS3, one method would be to have a container box with hidden overflow and another box inside it which is rotate and hangs out of it. The part that is still visible would form a triangle. Then you can use a box-shadow on both the boxes to achieve a shadow all the way around.
With CSS you can create shadow effects!
.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/
94
Hi post is a bit old but have an example that I used. Link to demo with 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
