SVG Glyphs in HTML - html

Question

I have a few SVG glyphs whitch i need to draw with HTML.
Is it possible to create HTML with CSS so that it looks like the SVG?
My problem was the shadow at the arrows.

Answer 1

You could use clip-path for the arrows (and its shadow too) and pseudoelements with a box-shadow for the figure with the overlapped boxes
Codepen example
Markup
<div class="arrow">Arrow</div>
<div class="boxes">Boxes</div>
Css
.arrow {
height: 55px;
width: 250px;
position: relative;
line-height: 55px;
padding: 0 35px;
}
.arrow::before, .arrow::after {
content: "";
display: block;
height: inherit;
width: inherit;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: #666;
clip-path: polygon(0 0, 25px 50%, 0% calc(100% - 5px), 85% calc(100% - 5px), 100% 50%, 85% 0);
}
.arrow::after {
transform: translate(5px, 5px);
opacity: .25;
}
.boxes, .boxes::before, .boxes::after {
position: relative;
background: #f2f2f2;
height: 180px;
width: 180px;
border-color: #999;
border-style: solid;
border-width: 1px;
border-top-width: 2px;
border-right-width: 2px;
box-shadow: 3px 4px 0 #ccc;
}
.boxes::before, .boxes::after {
content: "";
position: absolute;
display: block;
}
.boxes::after { top: -12px; left: 4px; z-index: -1; }
.boxes::before { top: -20px; left: 14px; z-index: -2; }
The other two figures can be obtained with the same approach (they are just a simple change of size and colours)
Result

Answer 2

here is one of shape:
body{
padding:20px;
}
div {
position:relative;
display: inline-block;
background: red;
position:relative;
padding: 9px;
padding-right: 22px;
}
div:before {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent red transparent transparent;
position: absolute;
left: -15px;
top: 1px;
}
div:after {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent white transparent transparent;
position: absolute;
left: 93px;
top: 0px;
}
<div class="triangle">Hello world </div>