q1277267304 2021-12-31 16:38 采纳率: 80%
浏览 265
已结题

HTML+CSS可以制作出弧形文字吗?

假设有一个圆形,可以使用css制作出文字环绕圆周显示的样式吗?

  • 写回答

2条回答 默认 最新

  • 是你那 2021-12-31 17:33
    关注

    可以的。利用定位,再加上css3的变换属性,transform,roate(***deg)就可以实现。各种位置角度都能实现。给你写了个例子,你copy运行下就可以。如果对你有帮助,点下采纳一下,谢谢。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                div{
                    width: 50px;
                    height: 50px;
                    border: 1px solid red;
                    font-size: 25px;
                    color: black;
                    text-align: center;
                    line-height: 50px;
                    position: absolute;
                }
                #box{
                    left: 60px;
                    transform:rotate(60deg);
                }
                #box1{
                    left: 110px;
                    top: 80px;
                    transform:rotate(45deg);
                }
                #box2{
                    left: 180px;
                    top: 110px;
                }
                #box3{
                    left: 270px;
                    top: 80px;
                    transform:rotate(-45deg);
                }
                #box4{
                    left: 340px;
                    transform:rotate(-60deg);
                }
            </style>
        </head>
        <body>
            <div id="box"></div>
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
            <div id="box4"></div>
        </body>
    </html>
    
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月25日
  • 已采纳回答 1月17日
  • 创建了问题 12月31日

悬赏问题

  • ¥15 高价求抖音抓包技术,抖音抓包无网络问题
  • ¥15 【matlab】已知功率谱密度反求时域信号
  • ¥15 mindspore项目_模型适配
  • ¥15 openstack使用cinder后,实例运行时分配的总空间不能大于ceph的总空间
  • ¥15 [pcl::PLYWriter::writeASCII] Error during opening (?鶂?)!
  • ¥15 得到XY两轴的数据如何绘制成圆,输入整形器
  • ¥29 PHP读取PDF文件添加多个数字签名
  • ¥25 联邦学习vgg修改最后一个全连接层报错(默认是1000个输出,我的改为11就报错,改为200就没问题)
  • ¥15 maple画图问题,为什么会是这样
  • ¥15 RC522开发arduino作品刷卡失效