Rotate text using CSS3

Question

I want the text to look like this image.

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:

Allen Wong · Accepted Answer · 2020-11-18 06:50:16Z

1

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>

edited Nov 18, 2020 at 6:50

answered Nov 18, 2020 at 5:09

Allen Wong

1,4831 gold badge13 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shibbir Over a year ago

Thanks for your reply. but when I check it on responsive mode I can see that the text is outside of the box. Can we increase the column-count on responsive mode?

Allen Wong Over a year ago

@Shibbir Chrome will increase the column count on responsive mode. The text is outside of the box because of the padding, set box-sizing: border-box; to your divs and the problem will be solved. w3schools.com/css/css3_box-sizing.asp

Shibbir Over a year ago

I removed the padding and used the box-sizing but still the text is outside of the box

Allen Wong Over a year ago

div { box-sizing: border-box; width: 100%; }

Collectives™ on Stack Overflow

Rotate text using CSS3

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related