CSS实现文字环绕圆形展示

news2024/11/16 4:28:21

展示区域
在这里插入图片描述

代码区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 300px;
            height: auto;
            margin: 100px;
            --border-color:#333;
        }
        .content-main{
            padding: 20px;
            border-left: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            padding-top: 20px;
        }
        .content-header{
            height: 20px;
            transform: translateY(50%);
            display: flex;
            align-items: center;
        }
        .content-header-line{
            height: 1px;
            width: 20px;
            background-color: var(--border-color);
        }
        .content-header-lineMax{
            flex: 1;
        }

        .layout{
            ---layoutH:200px;
            height: 200px;
            width: 700px;
            display: flex;
            justify-content: center;
        }
        .layout-center{
            width: var(---layoutH);
            min-width: var(---layoutH);
            max-width: var(---layoutH);
            height: var(---layoutH);
            min-height: var(---layoutH);
            border-radius: 50%;
            border: 1px solid #ccc;
        }
        .layout-left,
        .layout-right{
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: center;
        }
        .layout-lr-item+
        .layout-lr-item{
            margin-top: 30px;
        }
        .layout-left .layout-lr-item:nth-child(1),
        .layout-left .layout-lr-item:nth-child(5){
            transform: translateX(30px);
        }

        .layout-right .layout-lr-item:nth-child(1),
        .layout-right .layout-lr-item:nth-child(5){
            transform: translateX(-30px);
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="content-header">
            <div class="content-header-line"></div>
            <div class="content-header-title">首位标题</div>
            <div class="content-header-line content-header-lineMax"></div>
        </div>
        <div class="content-main">
            内部消息展示
        </div>
    </div>


    <div class="layout">
        <div class="layout-left">
            <div class="layout-lr-item">环绕中......</div>
            <div class="layout-lr-item">环绕中......</div>
            <div class="layout-lr-item">环绕中......</div>
            <div class="layout-lr-item">环绕中......</div>
            <div class="layout-lr-item">环绕中......</div>
        </div>
        <div class="layout-center">

        </div>
        <div class="layout-right">
            <div class="layout-lr-item">环绕中......</div>
            <div class="layout-lr-item">环绕中......</div>
            <div class="layout-lr-item">环绕中......</div>
            <div class="layout-lr-item">环绕中......</div>
            <div class="layout-lr-item">环绕中......</div>
        </div>
    </div>
</body>
</html>