web-dev-qa-db-fra.com

Créer un bord incliné en div

J'essaie de créer un div incliné, et partout où j'ai regardé, je viens de trouver comment le faire en utilisant une sorte de bordure, ce qui ne fonctionnera pas car le div sera placé au-dessus d'une image.

Donc, le code en ce moment est le suivant en utilisant Bootstrap:

<div class="thumbnail">
    <a href="#">
        <img class="img-responsive" src="banner.jpg">
        <h3 class="headline-badge">slanted div text</h3>
    </a>
</div>

Et voici le CSS pertinent:

.thumbnail img.img-responsive {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.headline-badge {
    color: #fff;
    margin-top: 0;
    padding: 2%;
    position: absolute; 
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: #000;
}

Je veux donc créer une inclinaison vers le haut à droite. J'ai essayé d'utiliser une bordure avec peu ou pas de succès, et chaque fois que j'ai essayé de rendre la bordure transparente, elle ne l'affichait pas.

Quelqu'un at-il des idées sur la façon de créer cela en utilisant CSS? Je pense qu'il devrait également être réactif, ce qui est un problème majeur car l'inclinaison ne peut pas être simplement une hauteur/largeur fixe.

L'inclinaison doit être d'environ 45 degrés, et uniquement sur le côté droit de la div. Le texte ne doit pas être affecté par l'inclinaison.

L'effet devrait être similaire à ceci:

http://jsfiddle.net/webtiki/yLu1sxmj/

Merci d'avoir posté ce violon, mais j'ai vraiment besoin d'ajouter du texte à la div, et votre solution rend difficile de le faire comme le suggèrent les commentaires en réponse. L'inclinaison devrait également être inclinée vers le haut, pas vers le bas, et j'ai eu du mal à le faire sans affecter la gauche du div. Avec votre exemple, je n'ai pas pu comprendre comment ajouter du texte au-dessus de la div, bien que j'en ai peur.

htmlcsscss-shapes
19
germainelol

Vous pouvez utiliser un pseudo-élément asymétrique pour créer l'arrière-plan solide incliné de votre élément. De cette façon, le texte ne sera pas affecté par la propriété transform.

La propriété transform Origin permet au pseudo-élément d'être incliné à partir du coin inférieur droit et les parties de débordement sont masquées avec overflow:hidden;.

Le pseudo-élément est empilé derrière le contenu de la div avec un négatif z-index:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-Origin: 100% 0;
  -ms-transform-Origin: 100% 0;
  transform-Origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
  background-size: cover;
}
<div>slanted div text</div>
<div>
  slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>
36
web-tiki

Je pense que vous essayez d'ajouter une inclinaison pour une bannière ou une simple zone de clic. La suggestion que je donnerais vient de la façon dont les principaux sites Web comme Amazon et Google le font. C'est comme suit:

Créez une image vectorielle qui a l'inclinaison que vous voulez où elle couvre la proportion de div que vous voulez. Ensuite, lorsque vous l'ajoutez en tant que superposition, vous pouvez la définir comme position: absolue avec un z-index supérieur à tout dans la div.

Cela réduira considérablement le traitement et l'image mise en cache se chargera aussi rapidement que CSS. Cela permettra également d'éviter les problèmes de navigateur croisés.

J'espère que ça aide.

PS: les images vectorielles sont bien redimensionnées pour que vous n'ayez pas à vous soucier de la pixellisation et de tout ce genre.

2
user3842346

Ceci peut être réalisé facilement en utilisant CSS clip-path (et -webkit-clip-path)

Exemple ici

J'ai également trouvé cet outil pratique pour générer le code CSS avec un minimum d'agitation.

1
Andy P
**background-image: -webkit-linear-gradient(130deg, rgba(113, 182, 46, .6) 78%, rgba(0, 0, 0, 0) 0%);**
1
Ephraim mwai

Le problème avec la réponse acceptée est qu'elle ne fonctionne pas lorsque vous avez une image comme arrière-plan de l'élément parent. J'ai utilisé un arrière-plan svg en ligne à la place.

Html

    <div class="parent">
      <div class="slanted">
         I have a slanted Edge
     </div>
   </div>

Css

    .parent {
              background-image: url('http://lorempixel.com/600/350');
              background-size: cover;
              background-position: center center;
              padding: 100px;
     }

    .slanted {
                color: white;
                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'  preserveAspectRatio='none'><polygon points='0,300 0,0 150,0 300,300' width='100%' height='100%' style='fill:blue;'/></svg>");
                background-size:contain;
                width: 30%;
                font-size: 2em;
                padding: 4px 40px;
   }

Remarque: vous devrez peut-être jouer avec le svg et la hauteur et la largeur un peu. La réponse acceptée devrait fonctionner dans la plupart des cas. Cela n'a pas fonctionné pour moi car j'avais un élément parent qui avait un arrière-plan d'image.

Voici quelques ressources sur la balise svg:

https://www.w3schools.com/graphics/svg_intro.asp

https://developer.mozilla.org/en-US/docs/Web/SVG

https://www.w3schools.com/graphics/svg_polygon.asp

0
daniekpo