<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div{
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 24px;
box-sizing: border-box;
border: 1px solid #cdcdcd;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="div">未答题</div>
</body>
</html>
6 回答
蝴蝶刀刀
TA贡献1801条经验 获得超8个赞
图片 svg
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 50px;
background-color: #f5f5f5;
position: relative;
line-height: 50px;
text-align: center;
border: 1px solid #cdcdcd;
border-radius: 4px;
}
div:after{
content: '';
width: 0;
height:0;
border: 20px solid #f5f5f5;
border-color: #f5f5f5 transparent transparent transparent;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-150%,100%) skew(-60deg,0);
}
</style>
</head>
<body>
<div>tttt</div>
<script>
</script>
</body>
</html>但三角的边不知道怎么弄了
叮当猫咪
TA贡献1776条经验 获得超12个赞
<div style=" margin-top: 100px;width: 300px;height: 300px;position: relative;border: 1px solid #000000">
<div style="width:0; height:0; border-width:30px; border-style:solid;
border-color:transparent transparent #000 transparent;
position: absolute;top: -60px;left: 100px;
"></div>
<em style="display: block;width:0; height:0; border-width:29px; border-style:solid;
border-color:transparent transparent #fff transparent;position: absolute;top: -57px;left: 101px;"></em> </div>
如果不是斜的三角形你可以考虑这个，方向改变一下,如果一定要你图中斜的三角形，推荐用svg吧.
- 6 回答
- 0 关注
- 525 浏览
添加回答
举报
0/150
提交
取消