Triangle bouton méthode

Bonjour à tous,

j'essaie de créer un bouton triangulaire avec un contenu centré.

j'ai testé plusieurs méthodes comme les pseudos-éléments par exemple mais centrer un contenu devient difficile et la zone cliquable n'est pas triangulaire.

j'ai donc utiliser un simple carré avec une rotation à 45° dans un container en overflow:hidden.

démo

Que pensez-vous de cette méthode, d'autres sont-elles plus appropriées ou peut-on améliorer mon code ?

Merci
Modifié par olimann (31 Jan 2014 - 18:25)

je peut te proposer quelques uns de mes tests pour ajouter au tien http://codepen.io/collection/ydajB/

Merci pour les exemples.

tu utilises souvent "transform-origin" pour déplacer l'élément (une alternative à la position:absolute, j'imagine?!)
mais j'ai un peu de mal a comprendre son fonctionnement, par-exemple je n'arrive pas a centrer horizontalement le triangle dans son container.

.container  {
  width:100%;
  height: 70px;
  background: gray;
  overflow: hidden;
 
}

a {
  height:100px;
  width:100px;
  transform:rotate(45deg);
  transform-origin:top right;
  background: blue;
  margin: 0 auto;
  display: block;
}

Modifié par olimann (01 Feb 2014 - 17:33)

top right, équivaut a mettre une punaise sur le coin haut gauche de l’élément et d'effectuer la transformation à partir de ce point.
Par défaut , la transformation est généralement effectué a partir du centre de l’élément.
++

Autre méthode avec "translate"
Démo

body{
     margin: 100px 0 0 ;
}

a, .btn i {
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.outer-btn {
    width:100%;
    height: 71px;
    background: gray;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.btn, .btn i {
    display: block;
}
.btn {
    width: 100px;
    height: 100px;
    -moz-transform: rotate(45deg) translate(-35px, -35px);
    -o-transform: rotate(45deg) translate(-35px, -35px);
    -webkit-transform: rotate(45deg) translate(-35px, -35px);
    transform: rotate(45deg) translate(-35px, -35px);
    margin: 0 auto;
    background: red;
    position:relative;
}

/* si icone fixe */
/*
.btn i {
    width: 32px;
    height: 32px;
    font-size: 32px;
    font-style: normal;
    line-height: 32px;
    color: white;
    transform: rotate(-45deg) translate(0px, 80px);
    -ms-transform: rotate(-45deg) translate(0px, 80px);
    -webkit-transform: rotate(-45deg) translate(0px, 80px);
    -o-transform: rotate(-45deg) translate(0px, 80px);
    background: gray;
}
*/

/* si effet hover sur icone */
.btn i {
    width: 32px;
    height: 32px;
    font-size: 32px;
    font-style: normal;
    line-height: 32px;
    color: white;
    position:absolute;
    top: 55px;
    left: 55px;
    
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    background: gray;
}


.btn:hover {
    background: blue;
}

.btn:hover i {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);    
}

<!--[if IE 8]>
<style>
.btn {
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand');
	position: absolute;
	top: -70px;	
    left:0;
	right:41px;
    } 

.btn i {
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.00000000, M12=0.00000000, M21=0.00000000, M22=1.00000000,sizingMethod='auto expand');
	position: absolute;
	top: 90px;	
    left:55px;
    }
</style>
<![endif]--> 

Modifié par olimann (03 Feb 2014 - 16:33)