Overlay text from corner to corner of div content box

Question

I am trying to build a content box where I can overlay some text. I am working to build out a new feature. While it is in development I want to actually show some of the changes that will be coming on the page. Thus I would like to put it all in a grey box and then put the text "Under Construction" overlaid from corner to corner.

I am using PureCSS for other elements, I know this should no be a needed detail, but on the off chance that this framework has something cool already build in that I am not aware of then it would be great to just use that.

So I wanted to put a box around this section so I chose to put it in a grid context as that seemed best. I also wanted to put some text on a 45deg angle across the box. This is where I started and now I want to evolve it a bit. I would like to overlay the content not at a 45deg angle but instead from corner to corner. Now the big this is that I want this to resize dynamically with the content box and the page as it changes size. I have not found anything other than some examples of putting lines over boxes, but nothing is dynamic and nothing contained text.

I need a way to either do the math dynamical to figure out the box size and then the correct angle or a way to just have it go from bottom left to top right with relative positioning. Thus I know the transform: rotate(-45deg); will need to be changed. Also I would like to center the text if possible on this line.

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

Lastly, while this is a little off topic if possible it would be great to have the "Under Construction" come all from the CSS Styling but I haven't figured out how to get that to work yet. When I tried to put it in the content: ''; part of the CSS then took it out of the HTML all the text went away and only the emojis remained.

If this is a duplicate please help direct me the right way, I have spent some time looking and maybe my search terms are bad but I just haven't found and good solutions.

Update some Javascript to define the Angle I created a little added function to define the angle that is from corner to corner of the div. Now I need some help adding to my CSS. I did have to add the following to the above div so that I could get the properties id="diag"

I need to add the new variable that I created rotatdeg onto my styling for the sheet. Please help.

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

I also found this and it was not helpful, maybe some explanation would help this tutorial make more sense: http://jonraasch.com/blog/javascript-style-node

Calculations such as you require will need Javascript. CSS won't do it. CSS cannot detect an element's dimensions. — Paulie_D, Jul 22 '19 at 12:25
@Paulie_D thanks for the information. I am still not sure how to accomplish what I am trying to, that suggestion was just a thought. Can you help with this any further, I am still not sure how to approach this. — Ben, Jul 24 '19 at 04:40
@Paulie_D I created some Javascript to detect the elements dimensions. Now I am stuck as I do not know how I can the new variable I created to me CSS Styling — Ben, Aug 12 '19 at 21:38

Overlay text from corner to corner of div content box

0 Answers0