どもです。
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では少しジャギるとこですね。今回は良しとします。