前端开发者| 网站前端 快速开发框架 |
| 前端开发ui框架 |
| nodejs 开发前端框架 |
html 代码
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
/*三角形*/
.triangle {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #40BBF4;
}
/*提示框*/
.msg {
position: relative;
width: 200px;
height: 100px;
border: 1px solid #ccc;
box-shadow: 0 0 10px 2px #ccc;
}
.msg .triangle {
position: absolute;
top: 100%;
left: calc((100% – 10px) / 2);
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #ccc;
}
.msg .triangle:after {
content: “”;
position: absolute;
top: -11px;
left: -9px;
width: 0;
height: 0;
border: 9px solid transparent;
border-top-color: white;
}
</style>
</head>
<body>
<!–三角形–>
<div class=”triangle”></div>
<!–提示框–>
<div class=”msg”>
<div class=”triangle”></div>
</div>
</body>
| php web前端开发框架 |
| asp.net开发前端框架 |
| 移动端前端开发框架 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册