<div class="triangle">Стрелка реализована псевдоэлементом, тени — box-shadow.</div>
body {
background-color: #888;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #bada55;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.3);
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -1em;
top: 1px;
left: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: #bada55 #bada55 transparent transparent;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: 3px -3px 3px 0 rgba(0, 0, 0, 0.3);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.