.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.
.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
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>try this one i think it 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>