使用 css 转换和 jquery 创建一个三角形 div

Question

我正在尝试创建一个三角形“div”，我需要在其中输入一些文本和一个覆盖整个“div”的背景图像。

我尝试使用 css 和 jquery 来制作它（我使用了 jquery，所以“三角形元素”总是接触“三角形角”的 3 个顶点）

结果很好，但“三角形内容”不在其中。

我已对“三角形内容”应用了逆变换，以使其恢复原状，但之后我无法使其在父元素中居中。

http://jsfiddle.net/simonepri/c6aukfzj/1/

我已经创建了一个 sn-p 来向您展示问题。

如果您更改页面，您会看到黄色区域（“三角形内容”）没有覆盖整个黑色 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">		<!-- 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)
	</div></div></div>
  </section>
</article>

谢谢。

编辑： 这个问题不是重复的： CSS triangle containing text 因为它使用 css hack（边框颜色）来创建一个无法使用背景图像和背景位置设置样式的三角形。

Answer 1

稍微调整一下 left、top、width 和 padding-left 的 css 值，我得到了一个完全黄色的三角形：

http://jsfiddle.net/hbpnam7e/

主要问题似乎是使用：

width:  66.666666666666666666%;

Answer 2

只需将 rotate() 更改为 skewY() 即可解决我的问题，现在可以完美运行。 无论如何感谢您的帮助。