CSS Triangle / Arrow

[aaron4osu]

I’m trying to add a css triangle at the top of my div. I was able to find and implement with css an equilateral triangle, but I really don’t want something that tall… in other words I want the triangle to be about twice as wide and half as tall so it’s much more subtle.

here is a codepen of what I’ve got.
https://codepen.io/aaron4osu/pen/KKgdqwj

Any ideas?

[PaulOB]

Just play around with the border settings to change width and height of the triangle.
To reduce the height change the border-top:

border-top: solid 25px #f2e1dc; /* Creates the notch */

e.g.

  .pink_arrow:after {
    content:''; /* Required to display content */
    position: absolute; /* Sets the position absolute to the top div */
    top: 0;
    left: 50%;
    margin-left: -50px; /* Set margin equal to border px */
    width: 0;
    z-index:1;
    height: 0;
    border-top: solid 25px #f2e1dc; /* Creates the notch */
    border-left: solid 50px transparent; /* Creates triangle effect */
    border-right: solid 50px transparent; /* Creates triangle effect */
   }

Tov change the width change the left and right borders.