0

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.

8
  • 1
    puedes explicar como deberia funcionar? puedes cargar un snippet o algo asi para ver tu codigo funcionando?
    – sioesi
    el 16 jun. 2017 a las 13:26
  • Usa una capa distinta para el texto, fuera de la que se le aplica el transform. el 16 jun. 2017 a las 13:27
  • 1
    @sioesi listo ya puedes verlo, es simplemente que el texto no debe rotarse el 16 jun. 2017 a las 13:40
  • @ArnauCastellví probare eso a ver, gracias el 16 jun. 2017 a las 13:40
  • Agregando skew de 30° a los p vuelven a su estado normal: p { transform: skew(30deg); }.
    – gugadev
    el 16 jun. 2017 a las 13:51

0

Examina otras preguntas con la etiqueta o formula tu propia pregunta.