Cadre a message comme l'iPhone

Voir le sujet précédent Voir le sujet suivant Aller en bas

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Cadre a message comme l'iPhone

Message par Alex Fowl le Jeu 2 Juin 2011 - 2:26

Bonsoir,

Le code CSS :
Code:
.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#D0D5D4;
   background:-webkit-gradient(linear, 0 0, 0 100%, from(#B5BDBC), to(#D0D5D4));
   background:-moz-linear-gradient(#B5BDBC, #D0D5D4);
   background:-o-linear-gradient(#B5BDBC, #D0D5D4);
   background:linear-gradient(#B5BDBC, #D0D5D4);
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
}
.content {
    position:relative;
    z-index:1;
}
p {
    margin:1em 0;
}
.triangle-isosceles:after {
   content:"";
   position:absolute;
   bottom:-15px; /* value = - border-top-width - border-bottom-width */
   left:50px;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#D0D5D4 transparent;

    display:block;
    width:0;
}

Le code HTML :
Code:
<div class="content">
<p class="triangle-isosceles">Texte</p>
</div>
Smile

Cordialement,


Dernière édition par Alex Fowl le Jeu 2 Juin 2011 - 14:37, édité 1 fois

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum