How can I make this shape using CSS3?

Question

I'm having a hard time creating this shape using CSS3. I'm planning on using it as the end of a ribbon. I've found articles explaining how to create a full ribbon, but not just the end.

Answer 1

You can achieve this effect by using the ::before and ::after pseudo elements:

WORKING DEMO

<div class="ribbon"></div>

.ribbon {
    width: 100px;
    background: #000;
    color: #FFF;
    padding: 10px;
    margin-left: 20px;
    position: relative;
}

.ribbon::before,
.ribbon::after{
    content: "";
    border: 20px solid transparent;
    border-right: 20px; solid #000;
    position: absolute;
}

.ribbon::before {
    border-top: 20px solid #000;
    top: 0;
    left: -20px;
}

.ribbon::after{
    border-bottom: 20px solid #000;
    bottom: 0;
    left: -20px;
}