Inicia sesión




Elipse - Ellipse en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite una forma en Elipse - Ellipse en CSS3...
En general, usamos el border-radius para lograr el efecto de redondeo más a menudo. De hecho, border-radius es capaz de especificar sus ejes semiprincipales y semicortados por separado, solo necesita usar "/" para dividir. A través de esta propiedad, podemos implementar fácilmente gráficos comunes, como semicírculos, semi-elipses, círculos de círculos y círculos de círculos.
<style>
  main {
    width: 100%;
    padding: 60px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  div {
    width: 200px; height: 150px;
    background: #b4a078;
    margin-bottom: 30px;
  }
  .ellipse:nth-of-type(1) {
    width: 300px; height: 150px; 
    border-radius: 50% / 100% 100% 0 0;
  }
  .ellipse:nth-of-type(2) {
    width: 150px; height: 150px;
    border-radius: 100% 0 0 0;
  }
  .ellipse:nth-of-type(3) {
    border-radius: 50% / 100% 100% 0 0;
  }
  .ellipse:nth-of-type(4) {
    width: 100px;
    border-radius: 100% 0 0 0;
  }
  .ellipse:nth-of-type(5) {
    width: 300px;
    border-radius: 50% / 0 100%;
  }
  .ellipse:nth-of-type(6) {
    width: 300px;
    border-radius: 50% / 100% 0;
  }
</style>

<main>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
</main>
Ver resultado

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-09
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial

Elipse - Ellipse en CSS3
Elipse - Ellipse en CSS3 Elipse - Ellipse en CSS3...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Mejoras en los graficos y tablas en Google App

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Google Apps Herramientas Ofimaticas Noticias Tutorial

Agujeros De Seguridad En Android, Facebook, Windows, Office, Internet Explorer, Adobe...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Noticias Adobe Tutorial Facebook Windows Herramientas Ofimaticas

Como diseñar trayectorias del movimiento en PowerPoint

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Herramientas Ofimaticas PowerPoint Microsoft Software Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial