3

Comunidad, tengo una duda, ¿Cómo es posible realizar un cuadrado con inicio o terminación perpendicular en CSS3 como en el diseño de Microsoft?

Cuadrado con terminación o inicio perpendicular

1
  • Prueba aquí css3generator.com con Transform, es una herramienta muy sencilla que me agiliza mucho el trabajo.
    – Andrey
    el 11 nov. 2016 a las 9:26

2 respuestas 2

4

Puedes utilizar background-image con -webkit-linear-gradient para realizar este efecto.

Además, parece ser que es compatible con casi todos los navegadores (las nuevas versiones). Puedes ver todas las compatibilidades aquí.

#diagonal{
  background-image: -webkit-linear-gradient(280deg, blue 45%, black 50%);
  
  height: 100px;
  width: 100px;
}
<div id="diagonal"></div>

2

Simplemente con transform y la función rotate():

html, body {
  margin: 0;
}

body {
  background-color: #000;
}

header {
  margin: -50px;  
  height: 120px;
  background-color: #0078d7;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
<body>
<header>  
</header>
</body>

2
  • Cuida. La etiqueta </header> la has puesto como </<header>. el 11 nov. 2016 a las 9:20
  • 1
    @Error404 - Gracias el 11 nov. 2016 a las 9:21

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.