画这里三角形的方法:

用CSS来画空心三角形的方法

用CSS来实现:整个弹框的ID是#favoriteOptionMenus,对于#favoriteOptionMenus这个元素设置:before和:after的样式,让:before和:after的样式偏移一个像素,就可以实现了

Html代码为:

<div ></ul>
        </div>

对应实现三角形的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;
}

 

相关文章:

  • 2021-11-20
  • 2021-08-31
  • 2022-02-28
  • 2021-11-09
  • 2022-12-23
  • 2021-12-29
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-09-30
  • 2021-08-22
  • 2021-07-11
相关资源
相似解决方案