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

Question

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

我尝试使用 css 和 jquery 实现它(我使用 jquery 所以“三 Angular 元素”总是接触“三 Angular Angular ”的 3 个顶点)

结果很好，但“三 Angular 内容”没有居中。

我已将逆变换应用到“三 Angular 形内容”，以使其恢复原状，但之后我无法将其置于父元素的中心。

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

我创建了一个片段来向您展示问题。

如果您更改页面，您会看到黄色区域(“三 Angular 形内容”)没有覆盖整个黑色 div(“三 Angular 形元素”)。这是显示问题的图像: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(边框颜色)来创建无法使用背景图像和背景位置设置样式的三 Angular 形。

Answer 1

稍微调整一下 left、top、width 和 padding-left 的 css 值让我明白了一个完全黄色的三 Angular 形:

http://jsfiddle.net/hbpnam7e/

主要问题似乎是使用:

width:  66.666666666666666666%;