html - CSS Responsive Triangle Width -


simple question really, want know how make triangles width (made in css below code) equal page width when browser resizes triangle.

my code, far

.triangle {     color: crimson;     width: 0;     height: 0;     margin-top: 30%;     border-top: 100px solid crimson;     border-left: 100px solid transparent;     border-right: 100px solid transparent; } 

.triangle {     color: crimson;     width: 0;     height: 0;     margin-top: 30%;     border-top: 100px solid crimson;     border-left: 50vw solid transparent; /* check border size here! */     border-right: 50vw solid transparent; /* , here! */ } 

sample fiddle.

read more on css3 vh/vw units.

browser support not issue.


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

Kivy: Swiping (Carousel & ScreenManager) -

jdbc - Not able to establish database connection in eclipse -