css clip path alternative

Question

I am trying to do a banner for my website, a bit differently.

I want bottom border, to be kind of "arrow down" looking

Something like this: JS FIDDLE

.indexBanner {
  background-image: url('https://i.sstatic.net/dFUnt.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-color: #404040;
  height: 500px;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

<div class="indexBanner"></div>

But currently I am using clip-path, which is not supported by Firefox and IE. And also you can see that the "arrow shaped" border is a bit messy.

I've also tried transform: skew in which case the result was more of a "chat bubble" kind of effect.

Is there any way to do this, because I am all out of ideas.

You can use the skew approach mentioned in this answer - stackoverflow.com/questions/30368404/…. I don't understand what you meant by "chat bubble" effect. Maybe if you show a demo, I can help to fine tune it. SVG would be your best bet though. — Harry
– Harry, Commented Jun 11, 2016 at 11:55
Just noting that Firefox has supported clip-path with a reference to an SVG <clipPath> element for ages and with basic shapes like polygon for about a year (unprefixed). It needs the layout.css.clip-path-shapes.enabled flag set to true in about:config to work. — Ana
– Ana, Commented Jan 15, 2017 at 15:09

Gleb Kemarsky · Accepted Answer · 2016-06-11 13:59:19Z

2

https://jsfiddle.net/glebkema/h18w341m/

.indexBanner {
  background-image: url('http://nauci.se/Flipo/assets/images/study.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-color: #404040;
  height: 500px;
  position: relative;
  overflow-x: hidden;
}
.indexBanner:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 50vw solid white;
  border-right: 50vw solid white;
  border-top: 15vw solid transparent;
}

<div class="indexBanner"> 
</div>

edited Jun 11, 2016 at 13:59

answered Jun 11, 2016 at 13:24

Gleb Kemarsky

10.5k7 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

night11 · Accepted Answer · 2016-06-13 04:25:57Z

0

I have tried changing the arrow-border to look less messy.

https://jsfiddle.net/night11/b7ch05Ln/ - updated

-webkit-clip-path: polygon(0 1%, 100% 0, 100% 60%, 50% 100%, 0 60%);

edited Jun 13, 2016 at 4:25

answered Jun 11, 2016 at 12:31

night11

584 bronze badges

2 Comments

Gleb Kemarsky Over a year ago

Please check your link. I guess this jfiddle is for another issue.

night11 Over a year ago

Thanks for bringing to notice :)

Collectives™ on Stack Overflow

css clip path alternative

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related