简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css3 - 学习css构建图形时，遇到一个很有意思的现象，具体代码如下
怪我咯
怪我咯 2017-04-17 11:48:31
0
3
374
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS构建图形</title>
    <style type="text/css">
        #circle{
            width: 100px;
            height: 100px;
            background-color: #4285F4;
            border-radius: 50%;/*我的理解是各边长度的百分比*/
            text-align: center;
            line-height: 100px;
            float: left;
        }
        #oval{
            background-color: #4285F4;
            text-align: center;
            line-height: 100px;
            width: 200px;
            height: 100px;
            border-radius: 50%;
            float:left;
        }
        #triangle-up{
            font-size: 12px;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
            background-color: #4285F4;
            text-align: center;
    
            float: left;
            margin-left: 10px;
        
        }

        #triangle-down{
            text-align: center;
            width: 0;
            height: 0;
            border-left: 50px solid pink;
            border-right: 50px solid pink;
            border-top: 100px solid red;
            float:left;
            margin-left: 10px;


        }
    </style>
</head>
<body>
    <p id="circle">圆形</p>
    <p id="oval">椭圆</p>
    <p id="triangle-up">上三角形</p>
    <p id="triangle-down">下三角形</p>
</body>
</html>

我想在图形中添加文字 在三角形中文字老是下移，原因是啥？多谢

怪我咯
怪我咯

走同样的路，发现不同的人生

全部回覆(3)
阿神
阿神2017-04-17 11:50:31 3樓

因为你设置了width:0;宽度为0，文字没有显示的空间自然一直向下换行，可以用伪代码实现

#triangle-up,
#triangle-down{
    position:relative;
}
#triangle-up::after,
#triangle-down::after{
    content:"上三角形";
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:50%;
    transform:translate(0,-50%,0);
}
點贊 +0
新增回覆
Peter_Zhu
Peter_Zhu2017-04-17 11:50:31 2樓

因为看到三角形只是p的border,文字是在p的content里面的

點贊 +0
新增回覆
刘奇
刘奇2017-04-17 11:50:31 1樓

标签内的文字默认与基线对齐。 而这里的基线可以看作是 border 的内边界。
所以上三角的基线位置在上方，容器区域在上方； 下三角的基线位置在下方，容器区域在下方。

文字的white-space属性默认是忽略空白。宽度为 0 的情况下垂直展示文本

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！