Blog

HOME > Web > css > 【CSS】台形を作る

【CSS】台形を作る

2018/03/11

css

備忘録です。

CSSで台形を作る方法です。

参考サイト
[CSS] 台形をつくる（角を丸くしてみたり、中に文字を入れてみたり。）
The Shapes of CSS

まず台形を作ります。

HTML

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

CSS

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

台形の中に文字を入れます

HTML

<div class="trapezoid">文字を入れます</div>

CSS

.trapezoid {
    width: 160px;
    border-bottom: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    text-align: center;
    line-height: 80px;
}
文字を入れます

台形の中に文字を入れます

HTML

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

CSS

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

.inner {
    padding-top: 14px;
}
文字です。
二行目ですよ。

逆台形の場合

HTML

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

CSS

.trapezoid {
    width: 120px;
    border-top: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
}

逆台形に文字を入れる

HTML

<div class="trapezoid"><span>文字</span></div>

CSS

.trapezoid {
    position:relative;
    width: 120px;
    border-top: 80px solid orange;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
    text-align: center;
}
.trapezoid span{
    position:relative;
    top:-60px;
}
文字

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ