CSS_文字排版5

文字排版5

HTML

Code

<div class="wrap">
    <div class="container">
        <h1>CSS COKE IS AWESOME</h1>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Quam atque laboriosam omnis velit dolorum similique
                provident veniam, corporis ullam maxime repudiandae
                quasi mollitia porro magnam tempora id quos beatae
                saepe?
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Quam atque laboriosam omnis velit dolorum similique
                provident veniam, corporis ullam maxime repudiandae
                quasi mollitia porro magnam tempora id quos beatae
                saepe?
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Quam atque laboriosam omnis velit dolorum similique
                provident veniam, corporis ullam maxime repudiandae
                quasi mollitia porro magnam tempora id quos beatae
                saepe?
            </p>
        </div>
    </div>
    <div>
        <h3 class="clearcheck">clear-check：）</h3>
    </div>
</div>

CSS

使用 h1 的 :before、:after 來做兩個方框，透過定位來達成效果。

排版是用 float 來做，一樣記得要清除。

Code

// css reset
* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
}

body {
    // background-color: #edece1;
    box-sizing: border-box;
}

.wrap {
    margin: 100px 0;
}

.container {
    width: 1200px;
    margin: auto;
    position: relative;
    &::after {
        content: '';
        display: block;
        height: 0px;
        width: 100%;
        background-color: #f00;
        clear: both;
    }
    h1 {
        width: 400px;
        // 留白
        padding: 15px;
        color: #aaa;
        font-size: 90px;
        float: right;
        position: relative;
        &::before {
            content: '';
            display: block;
            // 定位在下方
            position: absolute;
            bottom: 0;
            width: 200px;
            height: 200px;
            border: 30px solid #f1c555;
            // background-color: #f1c555;
            // 顯示文字
            z-index: -1;
            transform: rotate(20deg);
        }
        &::after {
            content: '';
            display: block;
            // 定位在下方
            position: absolute;
            top: 0;
            width: 200px;
            height: 200px;
            border: 30px solid #f1c555;
            // background-color: #f1c555;
            // 顯示文字
            z-index: -1;
            transform: rotate(20deg);
        }
    }
    .content {
        column-count: 2;
        column-gap: 30px;
        p {
            line-height: 1.6;
            margin-bottom: 1em;
        }
    }
}

.clearcheck {
    width: 1200px;
    margin: 50px auto;
    background-color: #fff;
    border: 1px solid #aaa;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px #888;
}

參考：
https://www.youtube.com/watch?v=YYHqbVVXIGM&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=25