小三角代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.common-div{
width: 0;
height: 0;
margin: 20px;
}
.div1{
border-top: 25px solid blue;
border-left: 25px solid red;
border-right: 25px solid yellow;
border-bottom: 25px solid green;
}
.div2{
border-top: 25px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div3{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.div4{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid yellow;
border-bottom: 25px solid transparent;
}
.div5{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid green;
}
.div6{
border-top: 25px solid transparent;
border-left: 25px solid red;
border-right: 25px solid transparent;
border-bottom: 25px solid red;
}
.div7{
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid green;
border-bottom: 25px solid green;
}
</style>
</head>
<body>
<div class="common-div div1"></div>
<div class="common-div div2"></div>
<div class="common-div div3"></div>
<div class="common-div div4"></div>
<div class="common-div div5"></div>
<div class="common-div div6"></div>
<div class="common-div div7"></div>
</body>
</html>
小三角代码在线演示地址
气泡对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3对话框</title>
<style>
.dialog-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
position: relative;
margin-top: 30px;
background-color: #fff;
}
.dialog-box-1 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-2 .triangle {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -1px;
right: -1px;
}
.dialog-box-3 .triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
position: absolute;
top: -20px;
left: 10px;
}
.dialog-box-3 .triangle:after {
content: "";
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
position: absolute;
top: -6px;
left: -8px;
}
</style>
</head>
<body>
<div class="dialog-box dialog-box-1">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-2">
<span class="triangle"></span>
</div>
<div class="dialog-box dialog-box-3">
<span class="triangle"></span>
</div>
</body>
</html>
气泡对话框在线演示地址
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
