css空⼼三⾓形_⽤CSS来画空⼼三⾓形的⽅法
画这⾥三⾓形的⽅法:
⽤CSS来实现:整个弹框的ID是#favoriteOptionMenus,对于#favoriteOptionMenus这个元素设置:before和:after的样式,让:before 和:after的样式偏移⼀个像素,就可以实现了
Html代码为:
Save Search:
Save
Saved Searches:
box sizing对应实现三⾓形的CSS代码为:
#favoriteOptionMenus {
padding: 15px 10px;
width: 450px;
}
#favoriteOptionMenus:before {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -24px;
left: 89px;
padding: 0;
border-bottom: 12px solid #FFFFFF;
border-top: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
display: block;
content: '';
z-index: 12;
}
#favoriteOptionMenus:after {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -26px;
left: 88px;
padding: 0;
border-bottom: 13px solid #9c9999; border-top: 13px solid transparent; border-left: 13px solid transparent; border-right: 13px solid transparent; display: block;
content: '';
z-index: 10;
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论