Question

我试图创建一个三角形的＆＃39; div＆＃39;我需要输入一些文本和一个覆盖整个＆＃39; div的背景图像。

我尝试使用css和jquery（我使用jquery，因此＆＃39; triangle-element＆＃39;总是触及＆＃39; triangle-corner＆＃39;的3个顶点）

结果很好，但是三角形内容＆＃39;不在其中心。

我已将逆变换应用于三角形内容＆＃39;为了让它不被旋转，但在那之后我无法将其置于父元素的中心。

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

我已经创建了一个代码段来向您展示问题。

如果您更改页面，则可以看到黄色区域（＆＃39;三角形内容＆＃39;）未覆盖整个黑色div（＆＃39;三角形元素＆＃39;）。这是一张显示问题的图片：http://i.stack.imgur.com/DYJcj.jpg 我怎么能把黄色的div中心？

＆＃13;

$( 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)');
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

感谢。

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

Answer 1

摆弄left，top，width和padding-left的css值让我得到了一个完整的黄色三角形：

http://jsfiddle.net/hbpnam7e/

主要问题似乎是使用：

width:  66.666666666666666666%;

Answer 2

简单地将rotate（）更改为skewY（）已经解决了我的问题，现在效果很好。无论如何，谢谢你的帮助。

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

2 个答案: