ひし形（diamond）を中央揃えにしたいです。

ひし形の図形の中央に縦文字のテキストをに入れて、ひし形も左右中央揃えにしたいです。

html

css

.section-inner {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
width: 960px;
margin: 0 auto;
}

.diamond {
width: 200px;
height: 200px;
background-color: #210d34;
transform: rotate(-45deg) skew(20deg, 20deg);
}

.diamond-ttl {
transform: rotate(45deg);
align-items: center;
color: #fff;
}

現在、上記のようなコードを書いています。
どのようにしたら良いか教えてほしいです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

.diamond を変形させると中のテキストも変形してしまうので、
疑似要素を変形させるようにしてみました。

テキストの中央寄せはflexレイアウトを使うといいでしょう。

css
1.section-inner {
2  width: 100%;
3  max-width: 960px;
4  margin: 0 auto;
5}
6
7.diamond {
8  width: 200px;
9  height: 200px;
10  display: flex;
11  justify-content: center;
12  align-items: center;
13  position: relative;
14  margin: 0 auto;
15}
16
17.diamond::before {
18  content: "";
19  position: absolute;
20  display: block;
21  width: 200px;
22  height: 200px;  
23  background-color: #210d34;
24  transform: rotate(-45deg) skew(20deg, 20deg);
25  z-index: -1;
26}
27
28.diamond-ttl {
29  -ms-writing-mode: tb-rl;
30  writing-mode: vertical-rl;
31  color: #fff;
32}

CodePen Sample

別案

clip-pathを使った方がシンプルにできますね。

css
1.section-inner {
2  max-width: 960px;
3  width: 100%;
4  margin: 0 auto;
5  display: flex;
6  justify-content: center;
7}
8
9.diamond {
10  width: 380px;
11  height: 180px;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15  background-color: #210d34;
16  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
17}
18
19.diamond-ttl {
20  -ms-writing-mode: tb-rl;
21  writing-mode: vertical-rl;
22  color: #fff;
23}