Div as arrow shape without using other elements inside [duplicate]

Question

Is it possible to shape a div like an arrow ?

I saw this allready but in the most pages it was build with several divs and I simply want to use one.

Shape should look like

 ______________
|              \
|______________/

I tried around a lil bit with some samples but I could not get it to be in the shape I want. And as you can see, there are way more difficult shapes that can be build.

Anyone knows how to achive this ?

Answer 1

Gotcha. (After some work)

.block:after {
  color: black;
  border-left: 13px solid;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -13px;
}
.block {
  background-color: black;
  width: 100px;
  height: 26px;
  display: inline-block;
  position: relative;
}

<div class="block"></div>

Stole some of this from Tom Toms; didn't know you could do tricks like that with the border. You might also be able to have adjustable sizes using font-size: (basesize) and using ems for the other sizes.

Answer 2

You need two div elements a rectangle one and a triangle one, no way around that except a background image as far as I know. Here is how to get a triangle pointing to the right:

.triangle {
  color: black;
  border-left: 13px solid;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

Any specific reason you want to use only one div ?