ど素人から毛を生やす。<延>

CSSで円錐台を作りたい。

Web > css 2019年8月7日(最終更新:2月前)

どもです。

CSSで台形を作るのは、borderを使えば簡単です。
原理は以前に書きましたCSSで三角形を作るのと同じで、borderの一辺のみを表示させればOK。
三角形の場合は要素のwidthを0にしましたが、台形は要素のwidthを上辺、border-bottomを下辺にします。

また、CSSで円柱を作ることも可能です。
長方形を作り、border-radius:50%/25%;を設定してやれば、円柱のシルエットができます。
その中に色違いの楕円を入れてやれば、円柱の完成です。

さて、これらを組み合わせて円錐台を作ろうと思うと、borderで台形を作る方法ではborder-radiusの利き方が狂うため、作れません。

というわけで、border-radiusを利かせられる(borderではなく要素そのもので作る)台形の作り方を模索します。


#zukei{
	display:block;
	width:200px;
	height:100px;
	transform:perspective(200px) rotateX(40deg);
}
(*'ω'*)

できました。
perspective(transform:perspectiveも同)とtransform:rotateX()を組み合わせ、要素に奥行きをつけます。
正方形を書いた紙を奥に傾け、手前から見れば台形に見える寸法です。

これならborder-radiusを利かせられます。


#zukei{
	display:block;
	width:200px;
	height:100px;
	transform:perspective(200px) rotateX(40deg);
	border-radius:50%/25%;
}
(*'ω'*)

ミッションコンプリート。_(:3」∠)_
惜しむらくはChromeだと綺麗なのですが、FFでは少しジャギるとこですね。今回は良しとします。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)