CODEWITHSUNDEEP
htmlcsssvg
user6691398
user6691398

Reputation:

SVG Glyphs in HTML

I have a few SVG glyphs whitch i need to draw with HTML.

enter image description here enter image description here enter image description here enter image description here

Is it possible to create HTML with CSS so that it looks like the SVG? My problem was the shadow at the arrows.

Upvotes: 1

Views: 244

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

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

enter image description here

Upvotes: 2

לבני מלכה
לבני מלכה

Reputation: 16251

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>

Upvotes: 0

Related Questions