CSS实现文字环绕圆形展示

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

代码区域

<!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>