Hello! How can div 1 (square) be made div 2 (triangle)?

Scheme:

alt text

2 answers 2

 #rectangle { width: 200px; height: 100px; background-color: red; } #triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 200px solid transparent; } 
 <div id=rectangle></div> <br> <div id=triangle-topleft></div>

Source: geometric shapes on CSS .

  • @zloctb, I'm also interested in this question. And how to make the triangle was with a frame, and not just one color? - angry
  • for that there is svg. HTML and CSS invented not for drawing - Lucky

Look in the direction of css, in principle, this is what you did in 5 minutes:

 .up { width: 0px; height: 0px; border-style: inset; border-width: 200px 300px 0px 0px; border-color: #007bff transparent transparent transparent; float: left; } .up p { text-align: left; top: -190px; left: 10px; position: relative; width: 250px; height: 93px; margin: 0px; color: #fff; } 
 <div class="up"> <p>Ваш текст в трегуольнике Ваш текст в трегуольнике <p> </div>

http://jsfiddle.net/TRuQc/92/