En este artículo, discutiremos cómo configurar dos barras con flechas redondeadas superpuestas entre sí usando HTML y CSS.
Ejemplo 1: en el siguiente código HTML estamos usando el elemento <div> con una clase de atributo. Se usa para agrupar otros elementos de la página usando el atributo de clase . El código CSS está en la sección <estilo> del código HTML donde estamos usando muchos atributos diferentes para el <div class=”container”> como flexibilidad, visualización, alineación de elementos, contenido justificado, márgenes a la derecha, posición, fondo, etc. para la clase «bar1» y «bar 2».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 40%;
height: 36px;
display: flex;
color: black;
}
.container .bar1 {
flex: 1;
display: flex;
justify-content: center;
margin-right: 20px;
position: relative;
background: coral;
}
.container .bar1:after {
content: "";
position: absolute;
right: -44px;
height: 0;
border-left: 45px solid black;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
.container .bar2 {
flex: 1;
display: flex;
background: coral;
position: relative;
z-index: -1;
justify-content: center;
color: black;
}
.container .bar2:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
border-left: 45px solid white;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="bar1">Bar 1</div>
<div class="bar2">Bar 2</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código HTML le mostrará el resultado exacto de las barras superpuestas con una flecha redondeada. Hemos cambiado los márgenes de las barras. Puede ver la superposición completa de la flecha en la Barra 2. Los códigos se pueden implementar de ambas formas, como se muestra en el Ejemplo 1 y el Ejemplo 2.
Usamos flex para establecer la longitud flexible de las barras, índice z para controlar el orden de los elementos que se superponen, contenido para insertar espacio, posición para dibujar el método de posicionamiento y ancho, alto, inferior, borde izquierdo, borde superior, border-bottom para bordes y márgenes.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.rounded {
width: 40%;
height: 36px;
display: flex;
color: black;
}
.rounded .bar1 {
flex: 1;
display: flex;
justify-content: center;
position: relative;
background: yellow;
}
.rounded .bar1:after {
content: "";
position: absolute;
right: -44px;
height: 0;
border-left: 45px solid black;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
.rounded .bar2 {
flex: 1;
display: flex;
background: skyblue;
position: relative;
z-index: -1;
justify-content: center;
color: black;
}
.rounded .bar2:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
border-left: 45px solid white;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
</style>
</head>
<body>
<div class="rounded">
<div class="bar1">Bar 1</div>
<div class="bar2">Bar 2</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ayushimalik1308 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA