如何在HTML / CSS中的一个部分后面指向一个箭头

Question

我想在<section>元素的底部做一​​个向下箭头。它应该在底部的中间。但遗憾的是我还没有找到任何方法如何用css做到这一点。我自己也搞不清楚。

这是我的html：

<div class="down-btn">
 <svg class="down-btn-img">
  <polyline points="0,0 50,50 100,0" />
 </svg>
</div>

Answer 1

试试这个

.down-arrow {
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid red;
}

或者

HTML：

<section style="background: green; border-color: green;">Your section</section>

CSS：

    section {
        margin: 50px;
        padding: 50px;
        position: relative;
    }
   section:after {
        content: "";
        position: absolute;
       top: 100%;
       left: 50px;
       border-top: 50px solid green;
       border-top-color: inherit; 
       border-left: 50px solid transparent;
       border-right: 50px solid transparent; 
    }

JSFiddle

Answer 2

我刚用边距做了这件事，并用bottom: 0

将它附在底部

.down-btn  {
bottom: 0;
position: absolute;
min-width: 30px;
margin: 0px calc(50vw - 15px);
}

Answer 3

您可以使用旋转的伪元素执行此操作。不需要边框，它会根据您的部分的背景颜色进行更新。

您甚至可以使用viewport units

使其响应

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  height: 50px;
  background: #bada55;
  position: relative;
}
section::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 4vw;
  height: 4vw;
  left: 50%;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: -1;
}

<section></section>

Codepen Demo