<!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>我想在图形中添加文字 在三角形中文字老是下移，原因是啥？多谢
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Because you set width:0; the width is 0, the space where the text is not displayed will naturally wrap downwards. You can use pseudo code to achieve this
Because the triangle is just the border of p, and the text is inside the content of p
The text within the
tag is aligned with
基线by default. The baseline here can be regarded as the inner boundary of border.So
上三角的基线位置在上方，容器区域在上方； 下三角的基线位置在下方，容器区域在下方.The white-space attribute of text ignores whitespace by default. Display text vertically with width 0