Создание нижней границы стрелки

Question

Я пытаюсь создать нижнюю границу, которая выглядит следующим образом.

100% ширина с маленьким треугольником с центром. Я бы хотел, чтобы он был отзывчивым, поэтому он остается центрированным по мере изменения ширины экрана.

можно ли это сделать, используя css?

EDIT - я использовал код, чтобы создать треугольник, указывающий вниз, но проблема заключается в том, что я хочу, чтобы это выглядело как одна сплошная линия

код я использовал

.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

Вы можете использовать ::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 2

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 3

Вы можете использовать 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 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>