<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<style>
*{
padding: 0;
margin: 0;
}
/*******气泡************/
.reminBox{
150px;
height: 50px;
position: relative;
top: 100px;
left: 100px;
background: #fff;
border: 1px solid #808080;
border-radius: 12px;
}
.reminBox:before{
content: "";
0;
height: 0;
z-index: 1;
position: absolute;
top: -40px;
left: 22px;
border-top: 20px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #fff;
border-left: 10px solid transparent;
}
.reminBox:after{
content: "";
0;
height: 0;
position: absolute;
top: -40px;
left: 20px;
border-top: 20px solid transparent;
border-right: 12px solid transparent;
border-bottom: 20px solid #808080;
border-left: 12px solid transparent;
}
/*******感叹号**********/
.reminIcon{
position: absolute;
26px;
height: 26px;
top: 12px;
left: 12px;
background: #ffa300;
}
.reminIcon:before{
position: absolute;
content: "";
4px;
height: 13px;
background: #fff;
border: 1px solid #fff;
border-radius: 2px 2px 50% 50%;
top: 2px;
right: 10px;
}
.reminIcon:after{
position: absolute;
content: "";
4px;
height: 4px;
background: #fff;
border: 1px solid #fff;
border-radius: 50%;
top: 18px;
right: 10px;
}
/*********文本********/
.reminText{
background: #fff;
position: absolute;
color: #000;
left: 50px;
font-size: 12px;
top: 16px;
}
</style>
</head>
<body>
<script>
//获取父元素
let body = document.body;
//创建元素
let reminBox = document.createElement("div");
let reminIcon = document.createElement("div");
let reminText = document.createElement("div");
//设置class
reminBox.className = "reminBox";
reminIcon.className = "reminIcon";
reminText.className = "reminText";
//设置从属关系
body.append(reminBox);
reminBox.append(reminIcon);
reminBox.append(reminText);
//设置文本
reminText.innerText = "请填写此字段。";
</script>
</body>
</html>
结果：
