css3 - 学习css构建图形时，遇到一个很有意思的现象，具体代码如下
本文介绍了css3 - 学习css构建图形时，遇到一个很有意思的现象，具体代码如下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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>
<div id="circle">圆形</div>
<div id="oval">椭圆</div>
<div id="triangle-up">上三角形</div>
<div id="triangle-down">下三角形</div>
</body>
</html>我想在图形中添加文字 在三角形中文字老是下移，原因是啥？多谢
解决方案
因为你设置了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);
}这篇关于css3 - 学习css构建图形时，遇到一个很有意思的现象，具体代码如下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
