Flèche transparente / triangle en retrait

il y a plusieurs approches pour faire une Flèche transparente au-dessus d'une image avec CSS . Les deux que je décrirai impliquent des pseudo éléments pour minimiser le markup et avoir la même sortie. Vous pouvez également voir une approche SVG à la fin de cette réponse:

L'effet transparent sur la partie noire autour de la flèche est faite avec rgba() couleurs qui permettent la transparence. Mais vous pouvez utiliser l'opacité sur les pseudo-éléments si vous préférez.

---

1. SkewX ()

vous pouvez utiliser la propriété CSS3 skewX() sur deux pseudo-éléments pour rendre la flèche transparente. Le principal atout de cette approche est que la flèche transparente peut être responsive mais il vous permet également de mettre un bord sur la forme noire et autour du trait.

la réactivité de la forme est faite avec la propriété padding-bottom pour maintenir son rapport d'aspect (cette technique est décrite ici ).

DÉMO

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 3%;
  background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before,
.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  padding-bottom: inherit;
  background-color: inherit;
}
.arrow:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.arrow:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

<div class="wrap">
  <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
  <div class="arrow"></div>
</div>

prise en charge par le navigateur de la propriété transform : skew() est IE9+ ( voir canIuse ).

2. Frontière

l'atout de cette technique est le support du navigateur alors si vous avez besoin du support IE8, celui-ci est pour vous. L'inconvénient est que la forme ne peut pas être sensible parce que la bordure ne peut pas utiliser le % de largeurs.

DÉMO

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before,
.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  box-sizing: border-box;
}
.arrow:before {
  right: 50%;
  border-bottom: 20px solid rgba(0, 0, 0, 0.8);
  border-right: 20px solid transparent;
}
.arrow:after {
  left: 50%;
  border-bottom: 20px solid rgba(0, 0, 0, 0.8);
  border-left: 20px solid transparent;
}

<div class="wrap">
  <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
  <div class="arrow"></div>
</div>

---

3. Jouer avec c'!

exemple: si vous pouvez changer la couleur transparente noire pour la même couleur que votre couleur de fond (blanc ici), vous pouvez faire un triangle/Flèche transparent avec la même image de fond que le bloc:

DÉMO

.wrap {
    position: relative;
    overflow: hidden;
    width: 50%;
    margin: 0 auto;
    background-color:#fff;
}
.wrap img {
    width: 100%;
    height: auto;
    display: block;
}
.wrap:before, .wrap:after {
    content:'';
    position: absolute;
    bottom: 0;
    width: 50%;
    background-color: inherit;
    padding-bottom:3%;
}
.wrap:before {
    right: 50%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -ms-transform: skewX(45deg);
    -webkit-transform: skewX(45deg);
    transform: skewX(45deg);
}
.wrap:after {
    left: 50%;
    -ms-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -ms-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
}

<div class="wrap">
    <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>

4. Tooltip avec un triangle sur une image.

si vous avez besoin d'utiliser cette forme sur une autre image , le gradient de fond ou n'importe quelle couleur non Unie, vous aurez besoin d'utiliser une approche différente afin de voir l'image tout autour de la forme comme ceci:

Le point est d'utiliser la même image deux fois. Une fois dans l'élément div et une fois dans le triangle et les positionner exactement au même endroit avec positionnement absolu. La flèche est faite avec transform:rotate(); .

DÉMO

body{
  padding-top:100px;
  background:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg')no-repeat center center;
  background-size:cover;
}

.wrap, .img {
  display:inline-block;
  position:relative;
}
.tr{
  position:absolute;
  overflow:hidden;
  top:-25px; left:100px;
  width:50px; height:50px;
  -webkit-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}
.tr img{
  position:absolute;
  top:-15px; left:-100px;
  -webkit-transform-origin: 125px 40px;
  -ms-transform-origin: 125px 40px;
  transform-origin: 125px 40px;
  -webkit-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
.img{
  overflow:hidden;
  width: 600px; height:100px;
}
.img img{
  position:absolute;
  top:-40px;
}

<div class="wrap">
    <div class="img">
        <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
    </div>
     <div class="tr">
        <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" />
    </div>
</div>

DÉMO zone d'ombres.

5. SVG et cliPath

DÉMO utilisant une étiquette svg et clipPath.

Cela pourrait être une approche sémantique mieux si vous faites des graphiques.