Edited at

[CSS] 台形をつくる(角を丸くしてみたり、中に文字を入れてみたり。)

More than 5 years have passed since last update.


まずは普通に台形を作ってみます。


trapezoid.html

<div class="trapezoid"></div>



trapezoid.css

.trapezoid {

width: 120px;
border-bottom: 80px solid orange;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
}

スクリーンショット 2014-07-12 22.33.29.png


これの角を、丸めてみます。

水平方向、垂直方向の距離感を考えながら、以下の一行をcssに追加します。


trapezoid.css

border-radius: 26px 26px 6 6 / 80px 80px 6 6;


すると、下のようになります。

スクリーンショット 2014-07-12 22.36.19.png

…一応それっぽくはなるのですが、丸みを強めようと思うと、角度の問題でかなり無理が生じると思います。それと、このradiusを大きくすると(例えば、半径を高さより大きい数値に設定したり)よく分かんない挙動になります。(別途調べたいです。)


中に文字を書いてみます。

普通にdivの中に文字書きます。


trapezoid.html

<div class="trapezoid">文字です。</div>


まずは一行なので、line-heightで文字の高さが真ん中にくるようにしてみます。


trapezoid.css

.trapezoid {

width: 120px;
border-bottom: 80px solid orange;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
text-align: center;
line-height: 80px;
}

スクリーンショット 2014-07-12 22.51.20.png

二行にして、程よい具合に真ん中に配置させます。


trapezoid.html

<div class="trapezoid">

<div class="inner">文字です。<br>二行目ですよ。</div>
</div>


trapezoid.css

.trapezoid {

width: 120px;
border-bottom: 80px solid orange;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
text-align: center;
}

.inner {
padding-top: 14px;
}


スクリーンショット 2014-07-12 22.59.16.png

…適当です。.innerのpaddingで、適当に調節しているだけです。ただ、やってみて分かったことは、.trapezoidのpaddingやmarginでは、どうにも上手くいかない」ということなんです。