JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/maxwellito/vivus/master/dist/vivus.min.js"></script>
<svg class="triangle" viewBox="0 0 744.09448819 1052.3622047">
  <defs
     id="defs4" />
  <g>
    <path
       d="m 111.82447,414.50506 159.6041,-159.6041 159.6041,159.6041 z"
       style="opacity:1;fill:none;fill-opacity:1;stroke:#000000" />
  </g>
</svg>

JavaScript

.triangle{
	position: relative; 
	height: 0; 
	width: 100%; 
	padding: 0;
	padding-bottom: 55.4%; 
	/*
	this padding-bottom is viewBox SVG prop ratio!
	in this case: 655.29 / 760.33 = 0,86184946 ~ 86.1%
	*/
}