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

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

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

Ответов (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>

Вы можете сделать это с изображением, но более интересный способ - повозиться с границами 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;
}

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