a {
margin-left: 10%;
background: rgba(33, 150, 243, .8);
text-decoration: none;
width: 100px;
padding: 5%;
padding-left: 1%;
padding-right: 1%;
display: flex;
flex-flow: column;
line-height: 29%;
height: 80px;
justify-content: center;
align-items: center;
-webkit-transform: skew(-30deg) skewY(-5deg);
-moz-transform: skew(-30deg) skewY(-5deg);
-ms-transform: skew(-30deg) skewY(-5deg);
-o-transform: skew(-30deg) skewY(-5deg);
transform: skew(-30deg) skewY(-5deg);
color: white;
}
<a target="_blank" href="#">
<p class="texto_360">TOUR</p>
<p><b class="strong_360">360º</b></p>
</a>
Verán, tengo esto
<a target="_blank" href="#"><p class="texto_360">TOUR</p><p><b class="strong_360">360º</b></p></a>
Con este css:
.links_360 a {
background: rgba(33, 150, 243, .8);
text-decoration: none;
width: 100px;
padding: 5%;
padding-left: 1%;
padding-right: 1%;
display: flex;
flex-flow: column;
line-height: 29%;
height: 80px;
justify-content: center;
align-items: center;
-webkit-transform: skew(-30deg) skewY(-5deg);
-moz-transform: skew(-30deg) skewY(-5deg);
-ms-transform: skew(-30deg) skewY(-5deg);
-o-transform: skew(-30deg) skewY(-5deg);
transform: skew(-30deg) skewY(-5deg);
color: white;
}
El .links_360 es un span que contiene los 2 links. el problema es que también el texto se rota, intente aplicar el transform al texto hacia el otro lado pero no funciona.
¿Alguna solución? gracias.
p { transform: skew(30deg); }
.