javascript - css三 Angular 形不起作用

Question

访问http://onecraftyshop.com

您会在第一部分看到带星号的灰色框。如果您查看 html，它将在 #av_section_2 下作为 .arrow-down。

我正在使用 jQuery 插入 .arrow-down 类。

jQuery('#av_section_2').prepend(jQuery('<div class="arrow-down"></div>'));

这是我的样式 CSS:

.arrow-down {
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
position: absolute;
top: 0px;
left: 50%;
}

所以我确定 jquery 没问题，因为它显示在页面上，但由于某种原因我无法让 css 制作三 Angular 形。

我该如何解决这个问题？更正后的 CSS 会很棒!

如果您需要任何其他信息，请告诉我!

谢谢

Answer 1

您需要更加具体，因为样式表中的一些其他规则覆盖了它。

.avia-section .arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #eeeeee;
  position: absolute;
  top: 0px;
  left: 50%;
}