Responsive half diamond border bottom CSS

Question

How do you achieve this kind thing on the bottom of a div in CSS? Is it possible?

Currently I use an image solution but I think it's not a good way.

Thanks!

For those questioning, I did research, and this is the thing I tried and it looked ugly.

width: 100%;
border-left: 800px solid transparent;
border-right: 800px solid transparent;
border-top: 84px solid #15C4CB;

It will look like this:

Not even centered or responsive.

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Dec 16 '15 at 18:25
Try modifying the code from http://cssarrowplease.com/ as a place to start. — Christine Murray, Dec 16 '15 at 18:27
Possible duplicate of [How do CSS triangles work?](http://stackoverflow.com/questions/7073484/how-do-css-triangles-work) — Alexander O'Mara, Dec 16 '15 at 18:28
I did try using images at first and I attempted using CSS borders. It looks ugly and is not responsive. I will update my question. — Angelo Ab, Dec 16 '15 at 18:29
Generally you should shove your triangle into the `::after` pseudo-element rather than putting it on the box itself. That makes it a box with a triangle instead of an awkward pentagon. Might have to adjust the margin, though, I forget if ::after has a footprint. — abluejelly, Dec 16 '15 at 18:50
@abluejelly thanks for the suggestion. I also tried that but to no avail, it's not responsive. — Angelo Ab, Dec 16 '15 at 19:01

score 3 · Accepted Answer · answered Dec 16 '15 at 19:02

The ideea is to use vw units instead of regular px; 50vw means half the viewport. This way you will always have them scaled related to your viewport;

#someid{
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 50px;
  
  background: #15C4CB;

  text-align: center;
}

#someid::before{
    content: "";
  
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
  
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 80px solid #15C4CB;
  
    box-sizing: border-box;
}

<div id="someid"> Bla bla bla </div>

Thank you so much for the solution! Works perfectly now. – Angelo Ab Dec 16 '15 at 19:39 — Angelo Ab, Dec 16 '15 at 19:39

score 0 · Answer 2 · answered Dec 16 '15 at 19:19

you could give a try to pseudo, rotate and box shadow:

p {
  /* or any other wrapper, here = demo purpose , so is width */
  width: 50%;
  margin: 1em auto;
  padding-bottom: 3%;
  /* == 3% width */
  position: relative;
  overflow: hidden;
}
p:before,
p:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100.2%;
  height: 100%;
  top: 100%;
}
p:before {
  left: -50%;
  transform-origin: top right;
  transform: rotate(5deg);
  box-shadow: -1000px -1000px 0 1000px #00C4CC;
}
p:after {
  right: -50%;
  box-shadow: 1000px -1000px 0 1000px #00C4CC;/* adapt here values to average max-height your containers could be (safe value) */
  transform-origin: top left;
  transform: rotate(-5deg);
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>

Responsive half diamond border bottom CSS

2 Answers2