4 行的布局,以及标题和段落之间的 SVG 图像

问题描述 投票:0回答:0

我有一个布局方面的小难题/问题,我需要一些指导

final effect

在附图中,我需要对布局进行编码,但我不完全确定在这种情况下采用哪种方法或哪种方法最好才能达到预期效果。这个问题专门针对右侧。标题下方的线条(蓝橙色)是SVG图形,计划使用GSAP(GreenSock)进行动画处理,因此不能直接添加到CSS样式中。

如何使 SVG 图像将标题文本与段落分开?除了使用负边距/填充之外,还有其他聪明的解决方案吗?

如有任何帮助,我将不胜感激。

html {
    font-size: 62.5%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2 {
    color: #fff;
    font-size: 93px;
    text-align: center;
}

.section-hero {
    height: 100vh;
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

.section-hero .container {
    width: clamp(1200px, 100%, 1600px);
    margin: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
}

.container .col-left {
    position: relative;
    flex: 0;
}

.container .col-right {
    position: relative;
    flex: 0;

}

.container .col-right .item-1 {
    position: relative;
    background-color: aqua;
}

.number {
    font-size: 120px;
    color: #fff;
    float: left;
}

.item-title {
    font-size: 32px;
    color: #ffc004;
    font-weight: 500;
    text-transform: uppercase;
}

.item-desc {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
}

.item-1 svg {
    position: absolute;
    top: 1%;

}
<section class="section-hero">
        <div class="container">
            <div class="left-col">
                <h2>Lorem ipsum dolor
                    sit amet</h2>
            </div>
            <div class="right-col">
                <div class="item-1">
                    <p class="number">1</p>
                    <h4 class="item-title">Lorem ipsum dolor sit amet</h4>
                    <p class="item-desc">Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium</p>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="789"
                        height="359" viewBox="0 0 789 359">
                        <image id="path1" width="789" height="359"
                            xlink:href="data:img/png;base64,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" />
                    </svg>
                </div>

                <div class="item-2">
                    <p class="number">2</p>
                    <h4 class="item-title">Lorem ipsum dolor sit amet,</h4>
                    <p class="item-desc">Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium</p>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700"
                        height="190" viewBox="0 0 700 190">
                        <image id="path2" width="700" height="190"
                            xlink:href="data:img/png;base64,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" />
                    </svg>


                </div>

                <div class="item-3">
                    <p class="number">3</p>
                    <h4 class="item-title">Lorem ipsum dolor sit amet</h4>
                    <p class="item-desc">Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium</p>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="670"
                        height="193" viewBox="0 0 670 193">
                        <image id="path3" width="670" height="193"
                            xlink:href="data:img/png;base64,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" />
                    </svg>
                </div>

                <div class="item-4">
                    <p class="number">4</p>
                    <h4 class="item-title">Lorem ipsum dolor sit amet</h4>
                    <p class="item-desc">Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium</p>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800"
                        height="267" viewBox="0 0 800 267">
                        <image id="path4" width="800" height="267"
                            xlink:href="data:img/png;base64,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" />
                    </svg>
                </div>
            </div>

        </div>
    </section>

html css flexbox grid
© www.soinside.com 2019 - 2024. All rights reserved.