CODEWITHSUNDEEP
css
Shibbir
Shibbir

Reputation: 2031

Rotate text using CSS3

I want the text to look like this image.

enter image description here

How can I make it using HTML and CSS?

HTML Code:

<div class="intro-text-container bg-color">
    <div class="intro-text">
        <p>和の香では「ハレの日の装い」をコンセプトに、各種着物レンタルを承っております。</p>
        <p>私のお着物との思い出は、幼い頃にお正月は家族で着物を着て出掛けたり、僅かながらも母や祖母の着物を染め直したり、京都に行って着物を誂えてもらったり。そんなお着物たちが大好きで、大切にしていました。着物を着た時の晴れ晴れしく、少し背が伸びる、凛とした感じも好きでした。</p>
        <p>大人になり、仕事をする中で出逢った、アンティークのお着物たち。</p>
        <p>また、アンティークまでは行かないまでも、昔きものとよばれる少し古いお着物の持つ独特の存在感と、大胆かつ繊細な柄ゆきや色彩。日本人の絶妙なバランス感を宿す美しさに次第に惹かれていきました。 　元々はオーダーウェディングドレスのお店としてスタートしたBLENDAですが、そんな好きが高じて、少しずつ婚礼のお着物を扱う様になり、目に留まった素敵なお着物たちを、ついつい集めているうちに、次第に種類も増えていきました。 過去の婚礼のお客様からのご要望もいただいて「いずれ七五三や成人式にもお応えしたい」とお着物のみを取り扱う姉妹店に育ちました。
        </p>
        <p>BLENDAに「和の薫漂う雰囲気を」。</p>
        <p>そんな想いで「和の香」と名付け、はじめはBLENDAの中に小さなスペースを設けました。</p>
        <p>今では皆様にご紹介できる程の点数になりましたので、数に限りはございますが、皆さまにお目にかけたいと思っております。</p>
        <p>私たちが大好きで大切にしているお着物たちを、ぜひ手に取っていただけますと幸いです。</p>
        <p>和の香　佐野桜子</p>
    </div>
</div>

CSS Code

.intro-text-container {
    .intro-text {
        writing-mode: vertical-rl;
        padding: 62px 55px;
        p {
            font-size: 14px;
        }
    }
}

But it's showing like that:

enter image description here

Upvotes: 0

Views: 45

Answers (1)

Allen Wong
Allen Wong

Reputation: 1433

use column-count: 2; with writing-mode: vertical-rl;

div {
    box-sizing: border-box;
    width: 100%;
}
.intro-text {
    writing-mode: vertical-rl;
    padding: 62px 55px;
    column-count: 2;
    column-gap: 40px;
    min-height: 500px;
}

p {
    font-size: 14px;
}
.author {
    text-align: right;
}
<div class="intro-text-container bg-color">
    <div class="intro-text">
        <p>和の香では「ハレの日の装い」をコンセプトに、各種着物レンタルを承っております。</p>
        <p>私のお着物との思い出は、幼い頃にお正月は家族で着物を着て出掛けたり、僅かながらも母や祖母の着物を染め直したり、京都に行って着物を誂えてもらったり。そんなお着物たちが大好きで、大切にしていました。着物を着た時の晴れ晴れしく、少し背が伸びる、凛とした感じも好きでした。</p>
        <p>大人になり、仕事をする中で出逢った、アンティークのお着物たち。</p>
        <p>また、アンティークまでは行かないまでも、昔きものとよばれる少し古いお着物の持つ独特の存在感と、大胆かつ繊細な柄ゆきや色彩。日本人の絶妙なバランス感を宿す美しさに次第に惹かれていきました。 　元々はオーダーウェディングドレスのお店としてスタートしたBLENDAですが、そんな好きが高じて、少しずつ婚礼のお着物を扱う様になり、目に留まった素敵なお着物たちを、ついつい集めているうちに、次第に種類も増えていきました。 過去の婚礼のお客様からのご要望もいただいて「いずれ七五三や成人式にもお応えしたい」とお着物のみを取り扱う姉妹店に育ちました。
        </p>
        <p>BLENDAに「和の薫漂う雰囲気を」。</p>
        <p>そんな想いで「和の香」と名付け、はじめはBLENDAの中に小さなスペースを設けました。</p>
        <p>今では皆様にご紹介できる程の点数になりましたので、数に限りはございますが、皆さまにお目にかけたいと思っております。</p>
        <p>私たちが大好きで大切にしているお着物たちを、ぜひ手に取っていただけますと幸いです。</p>
        <p class="author">和の香　佐野桜子</p>
    </div>
</div>

Upvotes: 1

Related Questions