一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加した初日です。クリックしてイベントの詳細をご覧ください。
私はコードに関するナゲッツ体験イベントに参加しています。詳細：クリエイティブなコードブロックを表示する
最近、クリエイティブなゲーム活動に参加していませんか？CSSを使って、中空のリングや扇形などの美しい効果を組み合わせることができるかどうか疑問に思ったので、インターネットにアクセスしてチュートリアルを検索し、検索しました。 GoogleとBaidu。希望する結果が見つかりませんでした。この需要が非常に少ないか、検索姿勢が間違っている可能性があります。私が見つけたのは、目隠しを使用して対応する効果を達成することだけですが、これは私が望むものではありません。少し前に掘ったことを突然思い出しました。ジンが張新徐のcssの新しい世界のコピーを渡したので、彼は本の内容を調べて、強力なclip-path属性を使用するという解決策を見つけました。方法を見てみましょう。この属性を実現することができます。望ましい効果。
この記事では、
clip-pathそれを使用して目的の効果を実現する方法についてのみ説明し、clip-path他のプロパティについては説明しません。興味がある場合は、自分で検索して学習することができます。
従来の扇風機の作り方について話しましょう。インターネットで学んだ方法では、border-radius属性を使って2つの半円を描き、片方の半円を回転させて次のようにします。
ファン角度が180度より大きい場合、拡張効果を形成するには、2番目の半円の色を最初の円の色と同じにする必要があります。ファン角度が180度未満の場合、2番目の半円の色は背景と同じ色にするために、ここで2番目の円の色は誰もが理解できるように水色と水色です。
ファンの形状が180度を超えても問題ないことがわかりますが、角度が180度未満の場合は、背景色を単色にし、背景色を変更clip-pathしないでください。主人公はどのように達成しますか。それ？
clip-pathいくつかの方法があります。今日はポリゴンクリッピングを使用してpolygonいます。このプロパティの使用は非常に簡単です。クリップするグラフの各ノードを設定するだけで、CSSは設定したポイントを接続し、に存在するグラフのみを残します。次のような下部の接続線
width: 100px;
height: 100px;
background: green;
clip-path:polygon(0% 0%, 50px 0, 50px 50px, 0 0);
复制代码では、扇形の場合はどうなるでしょうか。このとき、円を描いてから、次のように（コレクションコードブロックを後で配置します）、必要なグラフィックをカットして、最初に円を描きます。次に、左上隅の領域をトリミング（水色）に移動すると、トリミング領域と背景領域の重複部分が残ります（セクター形状）
中空扇形の作り方もとてもシンプルで、下図のように円の背景色を枠線に変えて枠線を描き、左上隅の位置を切り抜くことができます。境界線の重なり部分とトリミングエリアは残ります。
以下にコードのブロックを置きます
この小さな知識ポイントが導入されました。少数の人が使用するかもしれませんが、何もないよりはましです。