Transparent flèche/triangle en retrait

Je voudrais faire un transparent flèche sur une image. Ce triangle doit être en retrait d'un demi bloc transparent et de montrer l'image d'arrière-plan.

De sortie souhaité:

CSS:

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}

HTML:

<div class="barShow"></div>

La transparent CSS Flèche devrait être transparent sans couleur.

InformationsquelleAutor user3003727 | 2014-05-20

107

Il existe plusieurs approches pour faire un transparent flèche sur une image avec CSS. Les deux, je vais décrire impliquent des éléments pseudo afin de minimiser le balisage et ont le même résultat. Vous pouvez également voir une SVG approche à la fin de cette réponse :

Transparent flèche/triangle en retrait

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 de l'opacité sur les éléments pseudo si vous préférez.

1. SkewX()

Vous pouvez utiliser le CSS3 skewX() propriété sur deux éléments pseudo pour faire de la transparence de la flèche. L'atout principal de cette approche est que la transparence de la flèche peut être sensible mais il vous permet également de mettre une bordure sur la forme noire et autour du traingle.

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

DÉMO

CSS:

.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);
}

HTML:

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

Prise en charge du navigateur pour la transform : skew() propriété est IE9+ (voir canIuse).

2. Frontière

L'actif de cette technique est la prise en charge du navigateur, donc si vous avez besoin d'IE8 de soutien de celui-ci est pour vous. L'inconvénient est que la forme ne peut pas être sensible parce que la frontière ne pouvez pas utiliser % largeurs.

DÉMO

CSS:

.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;
}

HTML:

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

3. Jouer avec elle!

Exemple : si vous pouvez modifier le noir de couleur transparente à la même que la couleur de fond (blanc ici), vous pouvez faire un transparent triangle/flèche avec la même image de fond comme le bloc :

Transparent flèche/triangle en retrait

DÉMO

CSS:

.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);
}

HTML:

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

4. Info-bulle avec un triangle sur une image.

Si vous avez besoin d'utiliser cette forme sur une autre image, dégradé d'arrière-plan ou quoi que non couleur unie, vous aurez besoin d'utiliser une approche différente afin de voir l'image tout autour de la forme comme ceci:

Transparent flèche/triangle en retrait

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 à la position exactement au même endroit, avec un positionnement absolu. La flèche est fait avec transform:rotate();.

DÉMO

CSS:

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;
}

HTML:

<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 avec boîte ombres.

5. SVG et cliPath

DÉMO à l'aide d'une balise svg et clipPath.

Cela pourrait être un semanticaly meilleure approche si vous êtes à la prise de graphics.

merci beaucoup! il fonctionne ^^
Super réponse, merci beaucoup.
Excellente réponse.

InformationsquelleAutor web-tiki

Approche Simple

Utiliser des pseudo-élément avec box-shadow et transform: rotate();
Ajouter overflow: hidden; à la div principale.

Extrait de :

CSS:

body {
  margin: 0;
  padding: 0;
  background: url(http://i.imgur.com/EinPKO3.jpg);
  background-size: cover;
}
div {
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}
div:before {
  position: absolute;
  top: -50px;
  left: calc(50% - 35px);
  content: "";
  height: 50px;
  width: 50px;
  background: transparent;
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.6);
}

HTML:

<div></div>

InformationsquelleAutor The Pragmatick

Voici une solution à l'aide de CSS clip-path qui n'a pas de dépassement de l'enveloppe.

CSS:

.wrap {
  position:relative;
  width:480px;
  height:270px;
  background-image:url(http://placehold.it/480x270);
}

.wrap:after {
  content:"";
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50px;
  background-color:rgba(0, 0, 0, 0.7);
  -webkit-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
  -moz-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
  clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
}

HTML:

<div class="wrap"></div>

InformationsquelleAutor ArcadeRenegade

Vous devez vous connecter pour publier un commentaire.