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




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






Como crear un Sitemap online

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-16
  • Categorias: RSS XML WebSite webmasters Marketing SEO Herramientas Noticias Tutorial

Stackposts herramienta de marketing en redes sociales

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-12
  • Categorias: Redes Sociales Facebook linkedin Twitter Instagram Marketing Herramientas Noticias Tutorial

Como agregar la opción 'Copiar enlace' a tu web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-08
  • Categorias: CSS3 html5 javascript Redes Sociales WebSite webmasters 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