En este artículo, veremos cómo crear un logotipo de GeeksforGeeks usando solo HTML y CSS.
Paso 1: Para crear el logotipo de GFG, primero tomamos dos divs (que están en línea) y hacemos círculos con ellos. Pero los elementos div están a nivel de bloque, por eso envolvemos ambos divs con un div contenedor y hacemos que div (envoltorio) muestre flex . Aplicar borde con 10px de color verde sólido. Obtendrás algo como esto.
Paso 2: ahora cree un triángulo en ambos círculos usando el pseudo-elemento : » después» y la propiedad de posición absoluta . Después de aplicar el triángulo obtendremos la forma como esta.
Aquí los colores de fondo del triángulo son amarillos, esto es solo para explicación. Cambia el color de fondo de los triángulos a blanco.
Después de aplicar el color de fondo blanco en los triángulos, el resultado es:
Paso 3: ahora usando el pseudo-elemento :before y la propiedad absoluta de posición , crea un cuadrado. Puedes aplicar esta regla a cualquiera de los círculos. El logo resultante se ve así:
Implementación con código:
Paso 1: Cree dos divs que tengan clases llamadas circle1 y circle2, y envuélvalos en un div principal que tenga la clase llamada wrapper.
HTML
<div class="wrapper"> <div class="circle1"></div> <div class="circle2"></div> </div>
Ahora asigne la propiedad CSS a la clase contenedora .
.wrapper{
display: flex;
}
Y estiliza ambos círculos.
CSS
.circle1{
height: 100px;
width: 100px;
border: 20px solid green;
border-radius: 100px;
position: relative;
}
.circle2{
height: 100px;
width: 100px;
border: 20px solid green;
border-radius: 200px;
position: relative;
}
Hasta ahora nuestro logo luce así
Paso 2: agregue los triángulos invisibles en ambos círculos usando el pseudo-elemento: después
CSS
.circle1:after{
content: "";
position: absolute;
border-top: 100px solid transparent;
border-left: 140px solid white;
left: -50px;
top: -35px;
}
.circle2:after{
content: "";
position: absolute;
border-top: 100px solid transparent;
border-right: 140px solid white;
right: -50px;
top: -35px;
}
El logotipo resultante se ve así:
Paso 3: ahora agregue un cuadrado en el logotipo usando el pseudo-elemento antes (no estamos usando el (pseudo-elemento) después porque ya lo usamos para crear el triángulo).
CSS
.circle1:before{
content: "";
height: 20px;
width: 276px;
position: absolute;
background: green;
left: -18px;
top: 45px;
z-index: 1;
}
El logotipo resultante es:
Código completo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: flex
}
.circle1 {
height: 100px;
width: 100px;
border: 20px solid green;
border-radius: 100px;
position: relative;
}
.circle2 {
height: 100px;
width: 100px;
border: 20px solid green;
border-radius: 200px;
position: relative;
}
.circle1:after {
content: "";
position: absolute;
border-top: 100px solid transparent;
border-left: 140px solid white;
left: -50px;
top: -35px;
}
.circle2:after {
content: "";
position: absolute;
border-top: 100px solid transparent;
border-right: 140px solid white;
right: -50px;
top: -35px;
}
.circle1:before {
content: "";
height: 20px;
width: 276px;
position: absolute;
background: green;
left: -18px;
top: 45px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circle1"></div>
<div class="circle2"></div>
</div>
</body>
</html>
El código se puede optimizar:
Puede ver que está utilizando muchas propiedades que son las mismas para ambos círculos. Si usamos la misma identificación para ambos círculos, podemos escribir las propiedades comunes en esa identificación y diferentes propiedades en las clases.
Aquí está el código optimizado para el logotipo de arriba:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: flex
}
#circle {
height: 100px;
width: 100px;
border: 20px solid green;
border-radius: 100px;
position: relative;
}
#circle:after {
content: "";
position: absolute;
border-top: 100px solid transparent;
top: -35px;
}
.circle1:after {
border-left: 140px solid white;
left: -50px;
top: -35px;
}
.circle2:after {
border-right: 140px solid white;
right: -50px;
}
.circle1:before {
content: "";
height: 20px;
width: 276px;
position: absolute;
background: green;
left: -18px;
top: 45px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="circle" class="circle1"></div>
<div id="circle" class="circle2"></div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA