<section>

<header> <h2>Ribbon style "Le bon coin"</h2>
<p><a href="http://www.leboncoin.fr/annonces/offres/bretagne/">Source</a></p>
  <p>Inconvénient : utilise un "div" à ajouter dans le html</p>
</header>
<div class="list-gallery">
  <h2>Version identique</h2>
  <div class="gallery-zone">
    <div class="background">
      <div class="title">
        <span>Version identique</span>
      </div>

      <p>ceci est un texte </p>
      <p>ceci est un texte </p>

    </div>
    <div class="title-triangle left">&nbsp;</div>
    <div class="title-triangle right">&nbsp;</div>
  </div>

</div>

<div class="list-gallery">
  <h2>Seulement à gauche</h2>
  <div class="gallery-zone">
    <div class="background">
      <div class="title v2">
        <span>Version 2 </span>
      </div>

      <p>ceci est un texte </p>
      <p>ceci est un texte </p>

    </div>
    <div class="title-triangle-2 left">&nbsp;</div>
  </div>

</div>
</section>
<section>
 <header> <h2>Ribbon pur css ::before"</h2>
<p>Réussi ! </p>
<p><a href="http://jsfiddle.net/4xeQH/light/">Source test 3</a></p>
</header>
<div class="list-gallery">
  <h2>Test 1 avec before</h2>
  <div class="gallery-zone">
    <div class="background">
      <div class="title v3">
        <span>before </span>
      </div>

      <p>ceci est un texte </p>
      <p>ceci est un texte </p>

    </div>
   </div>

</div>

<div class="list-gallery">
  <h2>Test 2 avec before </h2>
  <div class="gallery-zone">
    <div class="background">
      <div class="title v4">
        <span>au dessus </span>
      </div>

      <p>ceci est un texte </p>
      <p>ceci est un texte </p>

    </div>
   </div>

</div>
<div class="list-gallery">
  <h2>Test 3 avec before </h2>
  <div class="gallery-zone">
    <div class="background">
<a href="#" class="ribbon-container">
	<img src="http://placehold.it/140x160" alt="">
	<span class="ribbon">Hey, station!</span>
</a>

    </div>
   </div>

</div>

</section>

<section>
 <header> <h2>Quelques précisions</h2>
<p></p>
<p>impact changement épaisseur</p>
</header>
<div class="list-gallery">
  <h2>largeur différente</h2>
  <div class="gallery-zone">
    <div class="background">
      <div class="title test1">
        <span>before </span>
      </div>

      <p>border width a b c d </p>
      <p>avec b = d et b+d plus grand que la largeur disponible à gauche </p>

    </div>
   </div>

</div>

<div class="list-gallery">
  <h2>hauteur différente </h2>
  <div class="gallery-zone">
    <div class="background">
      <div class="title test2">
        <span>au dessus </span>
      </div>

      <p>border width a b c d </p>
      <p>avec a = c et a plus grand que que dans l'exemple précédent </p>

    </div>
   </div>

</div>


</section>
</div>

section {
  background-color: lightgrey;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
}

}
body {
  background-color: lightblue;
}
.list-gallery {
    width: 225px; 
    /* float: right; */
  
    margin-right: -10px;
    margin-left: 30px;
}

.list .list-gallery .gallery-zone {
    background: none;
}
.gallery-zone {
    width: 236px;
    position: relative;
    background: lightblue;
}

.gallery-zone .background {
    background: #E3DCCD;
    width: 176px;
    margin: 0 15px;
    padding: 28px 15px 13px 15px;
}

.gallery-zone .background>.title {
    margin: 0 -30px 28px -30px;
    background:  #F60 ;
    text-align: center;
    color: #FFF;
    text-transform: uppercase;
    height: 35px;
    line-height: 35px;
    font-weight: bold;
}

.gallery-zone .background>.title span {
    display: block;
}

.list .gallery-zone .title-triangle.left {
    border-color: #bd4b19 #bd4b19 transparent transparent;
}
.gallery-zone .title-triangle.left {
    left: 0;
    border-color: #BD4B19 #BD4B19 #FFFFEB #FFFFEB;
}
.gallery-zone .title-triangle {
    position: absolute;
    border-style: solid;
    border-width: 8px;
    width: 0;
    height: 0;
    top: 63px;
}

.list .gallery-zone .title-triangle.right {
    border-color: #bd4b19 transparent transparent #bd4b19;
}
.gallery-zone .title-triangle.right {
    right: 0;
    border-color: #BD4B19 #FFFFEB #FFFFEB #BD4B19;
}

/* version 2 */
.list .gallery-zone .title-triangle-2.left {
    border-color: #bd4b19 #bd4b19 transparent transparent;
}
.gallery-zone .title-triangle-2.left {
    left: 0;
    border-color: darkorange  darkorange  lightblue lightblue; 
}
.gallery-zone .title-triangle-2 {
    position: absolute;
    border-style: solid;
    border-width: 8px;
    width: 0;
    height: 0;
    top: 63px;
}

.gallery-zone .background>.title.v2 {
  width: 70% ;
}

/* Version before */
.gallery-zone .background>.title.v3 {
  width: 70% ;
}

.gallery-zone .background>.title.v3:before {
    left: 0;
    border-color: darkgreen  darkgreen  lightblue lightblue; 
    content: " ";
  position: absolute;
    border-style: solid;
    border-width: 6px 8px 6px 8px;
    width: 0;
    height: 0;
    top: 63px;
}

/* Version before au dessus */
.gallery-zone .background>.title.v4 {
  width: 70% ;
}

.gallery-zone .background>.title.v4:before {
    left: 0;
    border-color: lightblue darkgreen  darkgreen lightblue  ; 
    content: " ";
  position: absolute;
    border-style: solid;
    border-width: 6px 8px 6px 8px;
    width: 0;
    height: 0;
    top: 16px;
}

/* test 3 */
.ribbon-container {
	position: relative;
	display: inline-block;
	line-height: 1;
}

.ribbon-container img {
	vertical-align: middle;
}

.ribbon {
	position: absolute;
	bottom: 1em;
	left: 0;
	margin-right: 1em;
	padding: .75em 1.25em .75em .75em;
	border-radius: 0 .5em .5em 0;
	background-color: #39f;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 100%);
	box-shadow: inset 0 .062em 0 rgba(255,255,255,.6), 0 .125em .25em rgba(0,0,0,.2);
	color: #fff;
	text-shadow: 0 -.062em 0 rgba(0,0,0,.2);
	white-space: nowrap;
	transition: background-color .2s ease-in-out;
}

.ribbon:before,
.ribbon:after {
	position: absolute;
	background-color: inherit;
	content: "";
}

.ribbon:before {
	bottom: 0;
	left: -.5em;
	width: .5em;
	height: 3em;
	border-radius: 0 0 0 .5em;
	/* background-image: linear-gradient(to right, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%); */
}

.ribbon:after {
	top: -1em;
	left: -.5em;
	width: .5em;
	height: 1em;
	border-radius: .5em 0 0 .5em;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%);
	box-shadow: 0 .062em 0 rgba(255,255,255,.6);
}


.ribbon-container:hover .ribbon {
	background-color: #7acc29;
}

.test3-body {
  padding: 3px;
  margin-left: 10px;
}

/* TEST changement hauteurs */
.gallery-zone .background>.title.test1 {
  width: 70% ;
}

.gallery-zone .background>.title.test1:before {
    left: 0;
    border-color: darkgreen darkgreen lightblue    lightblue  ; 
    content: " ";
  position: absolute;
    border-style: solid;
    border-width: 6px 15px 6px 15px;
    width: 0;
    height: 0;
    top: 63px;
}

/* TEST changement épaisseur */
.gallery-zone .background>.title.test2 {
  width: 70% ;
}

.gallery-zone .background>.title.test2:before {
    left: 0;
    border-color: darkgreen  darkgreen lightblue lightblue  ; 
    content: " ";
  position: absolute;
    border-style: solid;
    border-width: 12px 8px 12px 8px;
    width: 0;
    height: 0;
    top: 63px;
}