ピクセルまたはパーセンテージを使用して div の隅に三角形を描画するにはどうすればよいですか?

Div の隅に三角形を描く

質問:

Web ページで三角形を描くにはどうすればよいですか?特定のピクセル値またはパーセンテージ値を使用して div の隅に配置しますか?

回答:

これを実現するには、主に 2 つのアプローチがあります:

絶対配置と境界線のトリックの使用:

1. 三角形要素を絶対的に配置し、その上部と右側のプロパティを 0 に設定します。
2. border を使用して三角形の寸法を定義します。 width および border-color プロパティ。たとえば、次のコードは、境界線のトリックを使用して右上隅に緑色の三角形を描画します:

<code class="css">.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608A32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}</code>

回転とクリッピングの使用:

1. 三角形要素を div の内側に相対的に配置します。
2. transform:rotate(45deg) を使用して三角形要素を 45 度回転します。
3. オーバーフローを使用して、div の境界を越えて伸びる余分な三角形を非表示にします。

このアプローチの使用例を次に示します。

<code class="css">.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background: black;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.triangle {
  position: relative;
  top: 10%;
  left: 90%;
  width: 10%;
  height: 10%;
  -webkit-transform: rotate(45deg);
  background: green;
}</code>

どちらの方法でも、パーセンテージまたは絶対値を使用して三角形の形状と位置をカスタマイズでき、Web ページに柔軟性をもたらします。デザイン。

以上がピクセルまたはパーセンテージを使用して div の隅に三角形を描画するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。