Discussion :

[Dsphinx]

Bonjour,

Je cherche à reproduire automatique cet effet en fin de ligne en CSS3 (voir ci-joint).

J'arrive (grâce à http://debray-jerome.developpez.com/...trie-avec-css/) à faire un parallélogramme pas uniquement en fin de ligne.

Merci de votre aide.

Dsphinx.

[Torgar]

Peut-être avec les pseudoéléments comme le souligne Jérôme : http://debray-jerome.developpez.com/...vec-css/#LVIII

[rodolphebrd]

+1 Torgar, j'étais en train de faire un exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1>SADFASSD DF</h1>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
h1{
  background:black;
  color:white;
  width:8em;
  height:1.5em;
  line-height:1.5em;
  position:relative;
  padding-left:0.5em;
}
h1:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:-1.5em;
  width: 0;
  height: 0;
  border-right: 1.5em solid transparent;
  border-bottom: 1.5em solid black;
}

Exemple en ligne

[Torgar]

Sur son image c'est dans l'autre sens

[rodolphebrd]

Je l'ai vu trop tard
Ça fera un petit TP.

[Dsphinx]

Merci pour l'aide à tous ! C'est le top ! Merci pour le code qui est facile à adapter !

POST RESOLU !