相关疑难解决方法(0)

边框与透明的中心箭头

我正在尝试使用具有向下箭头的底部边框来设置div .div将在其中包含图像,并且不应具有顶部,右侧或左侧边框.向下箭头的填充应与div或透明相同.

我已经能够使用以下代码使其大部分工作:

.hero {
  position: relative;
  background-color: yellow;
  height: 320px !important;
  width: 100% !important;
  border-bottom: 1px solid red;
}
.hero:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 50px #e15915;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}

Run Code Online (Sandbox Code Playgroud)