CSSで山を作りたい

Question

前提・実現したいこと

CSSで風景を作っています。
その一環として"山"を作りたいのですが、三角形の作り方はわかっても、その凸凹感などの表し方がわかりません。わかる人がいらっしゃいましたらぜひ教えてください。
よろしくお願いします。

補足情報

使用テキストエディタ :Atom
使用言語 :HTML/CSS/(JavaScript)
イメージ↓

Comments

[azuapricot]

山が作りたい！だけじゃどうにもできないかと。現状のコードなり、具体例のスクリーンショットなりがあると答えやすいと思います。

[azuapricot]

おそらくなんとなくですが、凹凸表現したいなら色の濃淡つければいいだけなのでは～？と思います。やりたいことがイメージできないのでなんともいえませんが。奥は暗く、手前は明るくとかしてみたらどうでしょうか。

[dice142]

CSSに拘る必要がないように思えるのですが、なぜCSSで複雑な描画をしたいのでしょう？

[Macintosh]

恥ずかしながら、CSS以外知りません(汗)

[Macintosh]

他の言語で良い案がありましたら教えていただけると助かります。

Answer 1

具体的な設計図(=要件)を提示されないことには具体的な回答にはなりません。

現段階で適当に推理した結果で言えるのは、

いろんな大きさの三角を作ってpositionやz-indexで調整して重ねればいいんじゃないですかね。

ドラえもんも描けるくらいなので余程絵画みたいな表現でなければ割とどうにでもなるかと。

Comments

[Macintosh]

参考になりました。ありがとうございます。

[m.ts10806]

今更ですが追加された画像見ました。
CSSで”描”くメリット薄そうですね。もちろん技術的挑戦であれば頑張ってくださいとしか言えませんが、
そうでなければそこに割く時間が勿体ないレベルです（私は技術的挑戦であってもそこまで描こうとは思わないですが）

Answer 2

CSSだけで表現する曲線はborder-radiusかradial-gradient()か文字くらいです。（文字はフォントに依存するので決まった形にするのは工夫が必要）

【今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！ | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/border-radius

【radial-gradient() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient

（追記）clip-pathもあった。

【clip-path - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

複雑な形を作るならSVGのほうが面倒が少ないです。

【WEBデザイナーのはじめての「SVG」 - ウェブ企画ラボ】
https://webkikaku.co.jp/blog/webdesign/svg_for_webdesigner/

Comments

[Macintosh]

知りませんでした。ありがとうございます。

Answer 3

「エクセルアート」もあったりするので「CSSアート」も究めれば、ジャンルとして成り立ちそうですね。
他の回答にもありますが、組み合わせ（+根気）次第で、可能なような気はします。

CSSで絵を描く！？今日から作れる達人のコツをご紹介

Comments

[Macintosh]

参考にさせていただきます。ありがとうございます。

Answer 4

ここにCSSで作られた山があります。
ここを真似して見てはいかがでしょうか。
https://codepen.io/paulnthompson/pen/KwEBOd

Comments

[Macintosh]

ありがとうございます。やってみます。

Answer 5

CSSにこだわりがないようですので、

• フリーの風景画像や実際に撮った写真を使う
• フリーのイラストやご自身で描いたイラストを使う

という案もあります。

Comments

[Macintosh]

そうですね!ありがとうございます。