如何在 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

如何在 HTML/CSS 中的某个部分后使箭头指向下方

How to make an arrow pointing down after a section in HTML/CSS

html

css

svg

polyline

试试这个

或者这个

JSFiddle