creating bottom border arrow

Question

I am trying to create a bottom border that looks like the following image. enter image description here

100% width with the little triangle centred. I would like it to be responsive so it stays centred as the screen width changes.

can this be accomplished using css?

EDIT - I have used code to create a triangle pointing down, but the problem is is i want it to look like one solid line

code I used

.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;
}

You mean something like this? https://jsfiddle.net/5wx353m6/ — Zze, Jun 03 '15 at 05:52

David Thomas · Answer 1 · 2015-06-03T05:57:47.173

3

You could use 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>

External JS Fiddle demo, for experimentation.

References:

clip-path^{compatibility}.

edited Jun 03 '15 at 05:57

answered Jun 03 '15 at 05:55

David Thomas

249,100
51
377
410

hows the cross-browser compatibility using webkit-clip-path – user3550879 Jun 03 '15 at 05:57
Just added the [compatibility link](http://caniuse.com/#search=clip-path) as you were asking. It's pretty good, with the unfortunate exception of IE (up to and including 11 and Edge) and Opera Mini 8. – David Thomas Jun 03 '15 at 05:58
Doesn't work in FF 38 - just a thick black line unfortunately – StudioTime Jun 03 '15 at 05:59
Darn; I hadn't thought to check the notes; I just saw green-ish (which '*obviously*' equated to good). Sigh. – David Thomas Jun 03 '15 at 06:00
weak! I need a solution that has a good cross browser cross-over – user3550879 Jun 03 '15 at 06:25

Philip Dernovoy · Answer 2 · 2015-06-03T06:07:55.190

You can use ::after and transform: rotate() for example

.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

score 0 · Answer 3 · answered Jun 03 '15 at 05:53

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;
  }

Kurenai Kunai · Answer 4 · 2015-06-03T06:09:52.140

0

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>

edited Jun 03 '15 at 06:09

answered Jun 03 '15 at 05:58

Kurenai Kunai

1,842
2
12
22

creating bottom border arrow

4 Answers4