创建底部边框箭头

Question

我正在尝试创建一个类似下图的底部边框。

100％宽度，小三角形居中。我希望它具有响应性，因此当屏幕宽度发生变化时它会保持居中。

可以使用css完成吗？

编辑 - 我用代码创建了一个指向下方的三角形，但问题是我希望它看起来像一条实线

我用过的代码

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

Answer 1

您可以使用CSS'clip-path：

.demo {
    position: relative;
}

.demo::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1em;
    background-color: #000;
    -webkit-clip-path: polygon(0 0, 45% 0, 50% 50%, 55% 0, 100% 0, 100% 30%, 55% 30%, 50% 80%, 45% 30%, 0% 30%)
}

<div class="demo">Some arbitrary, purely-demonstrative and otherwise irrelevant, content to fill out the div element.</div>

外部JS Fiddle demo，用于实验。

参考文献：

• clip-path ^{compatibility}

Answer 2

您可以使用::after和transform: rotate()作为示例

.pretty-button {
    border: 2px solid #333;
    background: #fff;
    padding: 5px 20px;
    position: relative;
}
.pretty-button::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 2px solid #333;    
    border-width: 0 0 2px 2px;
    background: #fff;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
}

demo fiddle

Answer 3

http://jsbin.com/sedufaquve/3/edit

.arrow {
    position: relative;
    border-bottom: 1px solid #999;
    width:100%;
  }

.arrow:before, .arrow:after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent;
    border-bottom: 0;
  }

  .arrow:before {
    left: 50%;
    border-top-color: #777;
    border-width: 16px;
  }

  .arrow:after {
    bottom: -15px;
    left: 50%;
    border-top-color: #f3f3f3;
    border-width: 15px;
  }

Answer 4

<强> CSS ：

.down {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #7F7F7F;
}

HTML:

 

<div class="down"></div>