CSS の「クリップパス」は図形の左 3 隅のみを丸めることができますか?

CSS クリップパスのみを使用して左 3 つの角を丸くする方法

CSS クリップパスを使用してシェイプを作成することは、さまざまなデザインを実現する汎用性の高い方法です。ただし、特定の角を丸くするのは難しい場合があります。この記事では、カスタム図形の左端の 3 つの角を丸める問題について説明します。

問題:
次の HTML および CSS コードを考えてみましょう:

<div></div>

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

このコードは、鋭い左角と丸い右角を持つ形状を作成します。特に左端の 3 つの角だけを丸くするには、clip-path プロパティを変更する必要があります。

解決策:
目的の効果を実現するには、 inset() を利用します。 Round プロパティを持つ関数:

-webkit-clip-path: inset(0% 45% 0% 45% round 10px);
clip-path: inset(0% 45% 0% 45% round 10px);

inset() 関数を使用すると、各方向で非表示にする形状のパーセンテージとラウンドを指定できます。プロパティは丸みを帯びたエッジを作成します。 Round プロパティに 10px の半径を指定することで、左上、左下、中央下の角が丸くなります。

このソリューションでは、鋭い右の角を維持しながら、左端の 3 つの角が丸い形状が効果的に作成されます。 .

以上がCSS の「クリップパス」は図形の左 3 隅のみを丸めることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。