CSS でベベルボックスを作成するには?

CSS のベベルボックス

CSS でベベル角のあるボックスを作成することは一般的な要件です。この効果を達成するのが難しいかどうかは、ベベルのサイズによって異なります。

ベベルを小さくするには、box-shadow 属性を使用できます。より大きなベベルの場合は、より複雑な技術が必要になります。

CSS ポリゴンの使用

ポリゴン プロパティは CSS3 で導入され、ベベルの作成がはるかに簡単になりました。ポリゴンを使用すると、ベベルを含むカスタム形状を指定できます。

<code class="css">.cornered {
  width: 160px;
  height: 160px;
  background-color: red;
  clip-path: polygon(0 0, 0 40px, 40px 80px, 80px 0);
}</code>

透明な境界線を使用する

もう 1 つの方法は、透明な境界線を使用することです。背景色のコンテナ内に透明な境界線を配置することで、面取り効果を作成できます。

<code class="css">.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid transparent;
}

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

この方法は、小さなベベルを作成する場合に便利で、テキストを操作する場合に特に便利です。

サードパーティ ライブラリの使用

面取りされた角を持つボックスの作成に使用できるサードパーティ ライブラリも多数あります。これらのライブラリは、CSS を自分で記述することなく、この効果を実現する便利な方法を提供します。

人気のあるライブラリには次のものがあります:

• [Slantastic](https://meyerweb.com/eric/css/edge/slantastic/)
• [Trianglify ] (https://github.com/qrohlf/trianglify)
• [ポリゴン](https://github.com/polygonjs/polygon.js)

以上がCSS でベベルボックスを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。