如何在html / css中的每个div的顶部添加底部箭头

Question

我正在尝试在网页的每个div部分的顶部添加一个底部箭头图像。我希望底部箭头居中，如http://jirungu2012.wix.com/firebrandoption2

每个部分都有不同的底部箭头颜色

Answer 1

您可以使用图片，也可以使用CSS。这是一个绿色跨度线的快速示例，以显示它居中。将来请在您的问题中显示您的尝试并添加更多详细信息。

div{
  width:500px;
  height:200px;
  background-color:blue;
  position:absolute;
  top:0;
  left:0;
}
div::before{
  content:" ";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;	
  border-top: 20px solid #f00;
  position:absolute;
  left:50%;
  transform:translateX(-50%)
}
span{
  position:absolute;
  left:50%;
  width:1px;
  height:100%;
  background-color:green;
}

<div>
<span></span>
</div>

Answer 2

＆＃13;

＆＃13;

.solidArea{
  width:100%;
  height:20px;
  background-color:lightblue;
  margin: ;
}
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #fff;
  
}

＆＃13;

<div class="solidArea">
  <div align="center">
  <div class="arrow-down "></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

你去.. ..