Я пытаюсь создать треугольный «div», где мне нужно ввести текст и обратное изображение, которое покрывает весь «div».Создайте треугольный div с использованием преобразования css и jquery
Я пытался сделать это с помощью CSS и JQuery (я использовал JQuery, так что «треугольная элемент» всегда потрогать 3 вершины «треугольного-угол»)
Результат хороший, но «треугольного содержание 'не сосредоточен в нем.
Я применил обратное преобразование к «треугольному контенту», чтобы вернуть его обратно, но после этого я не могу его центрировать внутри родительского элемента.
http://jsfiddle.net/simonepri/c6aukfzj/1/
Я создать фрагмент кода, чтобы показать вам эту проблему.
Если вы измените страницу, вы увидите, что желтая область («треугольное содержимое») не охватывает весь черный div («треугольный элемент»). Вот изображение, которое показывает проблему: http://i.stack.imgur.com/DYJcj.jpg Как я могу центрировать желтый div ???
$(window).ready(function() {
var angle = Math.atan($(".triangle-corner").height()/$(window).width());
$(".triangle-element").css("transform", 'rotate(' + -angle + 'rad)');
$(".triangle-content").css("transform", 'rotate(' + angle + 'rad)');
});
$(window).resize(function() {
var angle = Math.atan($(".triangle-corner").height()/$(window).width());
$(".triangle-element").css("transform", 'rotate(' + -angle + 'rad)');
$(".triangle-content").css("transform", 'rotate(' + angle + 'rad)');
});#what-i-do {
width: 100%;
height: 600px;
}
#wid-designer {
width: 100%;
height: 40%;
}
.triangle-corner {
position: relative;
overflow: hidden;
width:100%;
height: 100%;
}
.triangle-element {
position: absolute;
overflow: hidden;
transform-origin: 100% 100%;
height: 100%;
width: 150%;
background-color: #000;
right: 0px;
top:-100%;
}
.triangle-content {
position: absolute;
overflow: hidden;
transform-origin: 100% 100%;
height: 100%;
width: 66.666666666666666666%;
background-color: #ff0;
right: 0px;
color: #ffffff;
top:100%;
font-size: 40pt;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article id="what-i-do"> \t \t <!-- 1 -->
<section id="wid-designer">
<div class="triangle-corner"><div class="triangle-element"><div class="triangle-content">
the yellow div need to fill the balck div and need to be centered (0 margin in all direction)
\t </div></div></div>
</section>
</article>Спасибо.
EDIT: Этот вопрос не является дубликат: CSS triangle containing text Как использовать хак (границы цвета) для того, чтобы создать trinagle, который не может быть стилизован фоном изображения и фон позицией.
Возможный дубликат [CSS-треугольник, содержащий текст] (http://stackoverflow.com/questions/15112819/css-triangle-containing-text) –
Не дубликат, так как он использует css-взломать, чтобы создать триагл которые не могут быть оформлены с фоновым изображением и фоновой позицией. – simonepri