[CSS] 台形をつくる（角を丸くしてみたり、中に文字を入れてみたり。）
まずは普通に台形を作ってみます。
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;
}
<div class="trapezoid"></div>
.trapezoid {
width: 120px;
border-bottom: 80px solid orange;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
}
これの角を、丸めてみます。
水平方向、垂直方向の距離感を考えながら、以下の一行をcssに追加します。
border-radius: 26px 26px 6 6 / 80px 80px 6 6;
すると、下のようになります。
…一応それっぽくはなるのですが、丸みを強めようと思うと、角度の問題でかなり無理が生じると思います。それと、このradiusを大きくすると（例えば、半径を高さより大きい数値に設定したり）よく分かんない挙動になります。（別途調べたいです。）
中に文字を書いてみます。
普通にdivの中に文字書きます。
<div class="trapezoid">文字です。</div>
まずは一行なので、line-heightで文字の高さが真ん中にくるようにしてみます。
.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;
}
二行にして、程よい具合に真ん中に配置させます。
<div class="trapezoid">
<div class="inner">文字です。<br>二行目ですよ。</div>
</div>
.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;
}
…適当です。.innerのpaddingで、適当に調節しているだけです。ただ、やってみて分かったことは、「.trapezoidのpaddingやmarginでは、どうにも上手くいかない」ということなんです。
Author And Source
この問題について([CSS] 台形をつくる（角を丸くしてみたり、中に文字を入れてみたり。）), 我々は、より多くの情報をここで見つけました https://qiita.com/mochizukikotaro/items/f0a2ff58bc28dd48f45b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .