Как создать треугольник из DIV

Question

У меня есть div в HTML с некоторым текстом, написанным на нем.
div создается путем установки его X, Y координат и height и width.
Я хочу нарисовать треугольник с наложением div, чтобы мой контент не терялся.
Я не могу изменить координаты X, Y, так как позиционирование моего другого div основано на этом div.
Генерация треугольника с использованием множественного подхода div также не представляется возможной, так как я не уверен, в каком div я напишу свой текст тогда ......

Может кто-нибудь предложить идею о том, как я могу это сделать? ..

Answer 1

Вы можете сделать это с изображением, но более интересным способом является возиться с границами div, чтобы сделать треугольник.

.triangle {
     font-size: 0px; 
     line-height: 0%; 
     width: 0px;
     border-bottom: 20px solid #000;
     border-left: 10px solid #000;
     border-right: 10px solid #000;
}

Как это работает, объясняется гораздо яснее здесь

Answer 2

Используйте этот код для разработки треугольника:

CSS

.triangle {
    width:0; 
    border-bottom:120px solid red; 
    border-left:60px solid white; 
    border-right:60px solid white;
}

HTML

<div class="triangle"></div>