css带三角箭头的弹窗div
关键词: 带三角的div
0. html准备
<div class="box"></div>
调整 transform: rotate(135deg); 即可使箭头朝向改变。
1. 三角在下(bottom)
.box {
position: relative;
width: 300px;
height: 300px;
background: #fff;
border-radius: 10px;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.3);
}
.box:after {
position: absolute;
display: inline-block;
top: 290px;
left: calc(50% - 10px);
width: 0px;
height: 0px;
content: '';
border-style: solid;
border-width: 10px;
border-color: #fff #fff transparent transparent;
transform: rotate(135deg);
box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.1);
}
2. 三角在上(top)
.box {
position: relative;
width: 300px;
height: 300px;
background: #fff;
border-radius: 10px;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.3);
}
.box:after {
position: absolute;
display: inline-block;
top: -10px;
left: calc(50% - 10px);
width: 0px;
height: 0px;
content: '';
border-style: solid;
border-width: 10px;
border-color: #fff #fff transparent transparent;
transform: rotate(-45deg);
box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.1);
}
3. 三角在左(left)
.box {
position: relative;
width: 300px;
height: 300px;
background: #fff;
border-radius: 10px;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.3);
}
.box:after {
position: absolute;
display: inline-block;
top: calc(50% - 10px);
left: -10px;
width: 0;
height: 0px;
content: '';
border-style: solid;
border-width: 10px;
border-color: #fff #fff transparent transparent;
transform: rotate(-135deg);
box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.1);
}
4. 三角在右(right)
.box {
position: relative;
width: 300px;
height: 300px;
background: #fff;
border-radius: 10px;
box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.3);
}
.box:after {
position: absolute;
display: inline-block;
top: calc(50% - 10px);
right: -10px;
width: 0;
height: 0px;
content: '';
border-style: solid;
border-width: 10px;
border-color: #fff #fff transparent transparent;
transform: rotate(45deg);
box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.1);
}