Как сделать из квадратного div`a треугольный?

#html #css

Здравствуйте! Как можно сделать из div 1 (квадрат) div 2 (треугольник)?

Схема:


    

Ответы

Ответ 1

#rectangle {
  width: 200px;
  height: 100px;
  background-color: red;
}

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 200px solid transparent;
}








Источник: геометрические фигуры на CSS.


Ответ 2

Смотрите в сторону css в принципе вот что за 5 минут сотворил:



.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;
}

  
Ваш текст в трегуольнике Ваш текст в трегуольнике
    






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