1.工作中会用到的效果(原理：其实只是个视觉上的效果)
<style>
.box{
width: 100px;
height: 30px;
margin: 300px auto;
border-radius: 5px;
border: 1px solid #666;
position: relative;
}
.tip{
position: absolute;
left: 50%;
margin-left: -10px;
bottom: -10px;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #666 transparent transparent transparent;
}
.tip2{
position: absolute;
left: 50%;
margin-left: -10px;
bottom: -9px;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
</style>
</head>
<body>
<div class="box">
<i class="tip"></i>
<i class="tip2"></i>
</div>
</body>
2.也可以切图做哦，这个是border配合着定位做的。
<style>
.box{
width: 200px;
height: 100px;
background-color: blue;
position: relative;
margin:40px auto;
}
.text{
position: absolute;
right: -5px;
top: 0;
background-color: pink;
height: 20px;
padding: 0 15px;
}
.text i{
width:0;
height: 0;
position: absolute;
right:0;
bottom:-5px;
border-width: 5px 5px 0 0;
border-style:solid;
border-color: hotpink transparent transparent;
}
</style>
</head>
<body>
<div class="box">
<span class="text">文字<i></i> </span>
</div>
</body>
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
