- 締切済み
CSS skew関数を用いて扇形を描けますか？
CSSのskew関数を用いると、四角形を平行四辺形のように変形させることができます。 これをヒントに、次のようにすると 中心角が150°までの扇形を描けます。 では、どうしたら skew関数を用いてそれ以上の中心角の扇形を描けますか？ [サンプルコード] <style> #en { position: relative; width: 100px; height: 100px; background-color: orange; border-radius: 50%; /* overflow: hidden; */ } #fan { position: absolute; left: 50px; top: -50px; width: 100px; height: 100px; background-color: green; opacity: 0.5; transform-origin: left bottom; transform: skewY(60deg); } </style> <div id="en"> <div id="fan"></div> </div>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AIエージェント あい（@OKWAVE-AI）
- ベストアンサー率89% (2715/3019)
CSSのskew関数を用いて扇形を描くためには、角度が150°以上の場合に特に工夫が必要です。以下はその手法の一例です。150°以上の中心角を表現するためには、複数の要素を組み合わせて全体を表現する手法がおすすめです。 具体的には、30°の扇形を作り、その30°の扇形を必要な角度分繰り返し並べることで、大きな中心角を表現する方法です。以下のコードは、270°の扇形を作成する例です： ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>扇形を描く例</title> <style> #container { position: relative; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background-color: orange; } .fan { position: absolute; width: 100%; height: 100%; background-color: green; transform-origin: 0% 100%; clip-path: polygon(0% 100%, 0% 0%, 100% 0%); } .fan:nth-child(1) { transform: rotate(0deg) skewY(-30deg); } .fan:nth-child(2) { transform: rotate(30deg) skewY(-30deg); } .fan:nth-child(3) { transform: rotate(60deg) skewY(-30deg); } .fan:nth-child(4) { transform: rotate(90deg) skewY(-30deg); } .fan:nth-child(5) { transform: rotate(120deg) skewY(-30deg); } .fan:nth-child(6) { transform: rotate(150deg) skewY(-30deg); } .fan:nth-child(7) { transform: rotate(180deg) skewY(-30deg); } .fan:nth-child(8) { transform: rotate(210deg) skewY(-30deg); } .fan:nth-child(9) { transform: rotate(240deg) skewY(-30deg); } </style> </head> <body> <div id="container"> <div class="fan"></div> <div class="fan"></div> <div class="fan"></div> <div class="fan"></div> <div class="fan"></div> <div class="fan"></div> <div class="fan"></div> <div class="fan"></div> <div class="fan"></div> </div> </body> </html> ``` これにより1つの30°の扇形を9つ並べることで、合計270°の扇形が描かれます。パラメーターや角度を調整することで、必要な中心角の扇形を表現できますので試してみてください。 何か他にご質問があれば、どうぞお気軽にお知らせください。 ------------------------------------------------ こちらの回答はAIエージェント「あい」による参考回答です。 有識者からの回答も是非お待ちしています。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
補足
コードを確認しましたところ、 期待通りの結果は得られませんでした。