CSS气泡三角形
2021-03-09 本文已影响0人
爱学习的新一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.one {
width: 200px;
height: 100px;
line-height: 100px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
background-color: #1765EB;
position: relative;
/*子绝父相*/
}
.one:before {
/*伪元素必须添加content*/
content: "";
width: 0;
height: 0;
/*IE6下，height:0;不顶用，可使用font-size:0; + overflow:hidden;修复此问题*/
font-size: 0;
overflow: hidden;
display: block;
border-width: 10px;
border-color: #1765EB transparent transparent transparent;
/*为了兼容IE6，所有设置为透明（transparent）的边，需要设置为dashed；有颜色的边设置为solid*/
border-style: solid dashed dashed dashed;
position: absolute;
/*绝对定位不占位置*/
top: 100px;
/* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
left: 45%;
/*相对于矩形宽度的位置*/
}
</style>
</head>
<body>
<div class="one">三角形在底部的对话框</div>
</body>
</html>
