1

我正在尝试构建一个可以覆盖一些文本的内容框。我正在努力构建一个新功能。虽然它正在开发中，但我想实际展示一些将在页面上发生的变化。因此我想把它全部放在一个灰色的盒子里，然后把“建设中”的文字从一个角落覆盖到另一个角落。

我正在将 PureCSS 用于其他元素，我知道这不应该是一个需要的细节，但是如果这个框架已经内置了一些我不知道的很酷的东西，那么使用它会很棒。

所以我想在这个部分周围放一个框，所以我选择把它放在一个看起来最好的网格上下文中。我还想在框上以 45 度角放置一些文字。这是我开始的地方，现在我想稍微改进一下。我想不是以 45 度角覆盖内容，而是从一个角落到另一个角落。现在最重要的是，我希望它随着内容框和页面的大小变化而动态调整大小。除了一些将线条放在框上的示例之外，我没有发现任何其他内容，但没有任何东西是动态的，也没有任何内容包含文本。

目前看起来如何

我需要一种方法来进行数学动态计算以计算出盒子的大小，然后计算出正确的角度，或者让它从左下角到右上角的相对定位。因此我知道transform: rotate(-45deg);遗嘱需要改变。如果可能的话，我想将文本居中放在这一行上。

.diagonal-construct {
  content: '';
  transform: rotate(-45deg) perspective(0);
  text-align: center;
  vertical-align: center;
  font-size: 150%;
  color: Orange;
}

.diagonal-construct::before {
  content: "\01F6A7";
}

.diagonal-construct::after {
  content: "\01F6A7";
}

.grid-content {
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 3px;
  border-top-left-radius: 0;
  overflow-y: hidden;
  background: lightgrey;
}
<div class="grid-content" id="diag">
  <p>Please continue to checkback for more updates.</p>
  <div class="diagonal-construct"><b>Under Construction</b></div>
</div>

最后，如果可能的话，这有点离题，让“正在建设中”全部来自 CSS 样式会很棒，但我还没有弄清楚如何让它工作。当我试图把它放在content: '';CSS 的一部分然后把它从 HTML 中取出时，所有的文本都消失了，只剩下表情符号。

如果这是重复的，请帮助指导我正确的方式，我花了一些时间寻找，也许我的搜索词很糟糕，但我还没有找到好的解决方案。

更新一些 Javascript 来定义角度 我创建了一个小附加函数来定义从角到角的角度div。现在我需要一些帮助来添加我的 CSS。我确实必须在上面添加以下内容，div以便我可以获得属性id="diag"

我需要将我创建的新变量添加rotatdeg到工作表的样式中。请帮忙。

<body onresize="myFunction()">
<script>
function myFunction() {
  var w = document.getElementById('diag').clientWidth;
  var h = document.getElementById('diag').clientHeight;
  var deg = (Math.atan(h / w)) * (180 / Math.PI);       
  var rotatdeg = "-" + deg + "deg";
  }
</script>

我也发现这并没有帮助，也许一些解释会帮助本教程更有意义：http: //jonraasch.com/blog/javascript-style-node

4

0 回答 0