How can you create two triangles next to an image?

Question

How can you create two triangles next to an image?

As you can see in the jsfiddle, the triangles are not tounching the image. I want them to touch the image and the blue bar above. I tried this post: How can I have an image float next to a centered div? didn't work.

.content {
	width: 960px;
	margin: 0 auto;
}

ul.producten {
	margin-top: 4%;
	list-style-type: none;
}

ul.producten li {
	width: 315px;
}

ul.producten li img {
	display: inline-block;
	width: 295px;
}

.producten_top {
	width: 315px;
	height: 40px;
	background: #3bcdff;
}

.producten_top h1 {
	font-size: 30px;
	color: #fff;
	text-align: center;
	padding: 5px 0;
}

.arrow_left {
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #1c1c1d;
	transform: rotate(225deg);
	float: left;
}

.arrow_right {
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #1c1c1d;
	transform: rotate(315deg);
	float: right;
}

<div class="content">
		<ul class="producten">
			<li>
				<div class="producten_top"><h1>Test</h1></div>
				<div class="arrow_left"></div>
				<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
				<div class="arrow_right"></div>
			</li>
		</ul>
	</div>

jsfiddle

what it needs to be:

Answer 1

Use position: absolute instead of display: inline-block and give 8px border for triangles instead of 5px and set display: block and margin: auto for make img center. of course you need to set position: relative; for parent (ul.producten li).

.content {
    width: 960px;
    margin: auto;
}

ul.producten {
    margin-top: 4%;
    list-style-type: none;
}

ul.producten li {
    width: 315px;
    position: relative;
}

ul.producten li img {
    display: block;
    width: 295px;
    margin: auto;
}

.producten_top {
    width: 315px;
    height: 40px;
    background: #3bcdff;
}

.producten_top h1 {
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding: 5px 0;
}

.arrow_left {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #1c1c1d;
    transform: rotate(225deg);
    position: absolute;
    left: 0;
    top: 39px;
}

.arrow_right {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #1c1c1d;
    transform: rotate(315deg);
    position: absolute;
    right: 0;
    top: 39px;
}

<div class="content">
    <ul class="producten">
        <li>
            <div class="producten_top"><h1>Test</h1></div>
            <div class="arrow_left"></div>
            <div class="arrow_right"></div>
            <img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
        </li>
    </ul>
</div>

Answer 2

This technique makes a square div with a linear gradient alpha background that resembles a triangle. As a bonus, by adjusting the distance between alpha=1 and alpha=0 (the percentages) in the gradients you can change the anti-aliasing of the diagonal line (the left arrow has more anti-aliasing in this example).

.content {
	width: 960px;
	margin: 0 auto;
}

ul.producten {
	margin-top: 4%;
	list-style-type: none;
}

ul.producten li {
    width: 315px;
    position: relative;
}

ul.producten li img {
    display: block;
    width: 295px;
    margin: auto;
}

.producten_top {
	width: 315px;
	height: 40px;
	background: #3bcdff;
}

.producten_top h1 {
	font-size: 30px;
	color: #fff;
	text-align: center;
	padding: 5px 0;
}

.arrow_left {
    width: 10px;
    height: 10px;
    background: linear-gradient(225deg, rgba(28,28,29,1) 44%,rgba(28,28,29,0) 56%);
    position: absolute;
    left: 0;
    top: 40px;
}

.arrow_right {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, rgba(28,28,29,1) 48%,rgba(28,28,29,0) 50%);
    position: absolute;
    right: 0;
    top: 40px;
}

<div class="content">
		<ul class="producten">
			<li>
				<div class="producten_top"><h1>Test</h1></div>
				<div class="arrow_left"></div>
        <div class="arrow_right"></div>
				<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
				
			</li>
		</ul>
	</div>

Answer 3

I have modified your css. The changes I made are:

• Set the same width for the blue header and image
• Set position fixed for image and right arrow
• Set the arrows degrees values in negative

Check it out...

<html>
    <head>
        <style>


 .content {
        width: 960px;
        margin: 0 auto;
    }

    ul.producten {
        margin-top: 4%;
        list-style-type: none;
    }

    ul.producten li {
        width: 315px;
    }

    ul.producten li img {
        display: inline-block;
        width: 315px;
        position: fixed;
    }

    .producten_top {
        width: 315px;
        height: 40px;
        background: #3bcdff;
    }

    .producten_top h1 {
        font-size: 30px;
        color: #fff;
        text-align: center;
        padding: 5px 0;
    }

    .arrow_left {
        display: inline-block;
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #1c1c1d;
        transform: rotate(-225deg);
        float: left;
        position: fixed;
    }

    .arrow_right {
        display: inline-block;
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #1c1c1d;
        transform: rotate(-315deg);
        float: right;
    }
        </style>
    </head>
    <body></body>
</html>