Create a triangular appendix under div?

Question

I have received a design from my designer and I was wondering if this is even possible using HTML, CSS or JavaScript?

This seems to be possible using CSS and create a seperate div under the main div with position absolute.

However, if I use a background image on the div, the designer wants it to look as following:

I honestly have no idea how to to search for a solution for this, is there any way to achieve this?

you can use css triangles and rotate with background color as required https://css-tricks.com/snippets/css/css-triangle/ — Vinod Louis, Feb 03 '17 at 09:46

gavgrif · Answer 1 · 2017-02-03T10:23:56.830

1

Here is a quick little thing for the css triangle - you can adjust to suit:

.createdDiv{
  height:100px;
  margin-top:10px;
  background:#ddd;
}

.createdDiv:before{
    content: "";
    border-top: 15px solid white;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    top: 10px;
    right: 50%;
    margin-right:-10px;
    z-index:99;
}

<div class='createdDiv'></div>

edited Feb 03 '17 at 10:23

answered Feb 03 '17 at 09:51

gavgrif

15,194
2
25
27

Ahhh, came 10s too late to answer ! – AymDev Feb 03 '17 at 09:53
He he - @AymDev its a race in here with these answers :) – gavgrif Feb 03 '17 at 09:54
and I like to take it as a friendly one ;) – AymDev Feb 03 '17 at 09:56
This is a white arrow - how will the op get the image he wants in the arrow? – Pete Feb 03 '17 at 09:56
@Pete - working on that now – gavgrif Feb 03 '17 at 09:58
Thanks for the help so far! Pete indeed found a post that asks exactly what I am asking, but I gave you a plus 1 for the effort :) – PIDZB Feb 03 '17 at 10:43

Create a triangular appendix under div?

1 Answers1