1

テキストをオーバーレイできるコンテンツ ボックスを作成しようとしています。私は新しい機能を構築するために取り組んでいます。開発中ですが、ページに加えられる変更のいくつかを実際に示したいと思います。したがって、すべてを灰色のボックスに入れ、「Under Construction」というテキストを隅から隅まで重ねて配置したいと思います。

私は他の要素に 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 スタイリングから取得するのは素晴らしいことですが、それを機能させる方法はまだわかりません。それを CSS の一部に入れようcontent: '';として、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