Tengo este contenedor simple y generé algunas rayas verticales para usar como fondo.
export default function App() { return <div className="container"></div>; } .container { height: 200px; width: 100%; background-image: linear-gradient( 45deg, #000000 12.5%, #ffffff 12.5%, #ffffff 50%, #000000 50%, #000000 62.5%, #ffffff 62.5%, #ffffff 100% ); background-size: 11.31px 11.31px; position: relative; } Quiero crear un puntero (flecha), que se coloque en la parte superior o inferior, pero que tenga el mismo fondo que el principal. Y no importa qué valor le dé a la left o a right , debe tener las franjas alineadas con las del padre.
En este momento, tengo este código para el pseudoelemento.
.container::after { content: ""; position: absolute; bottom: 100%; background-image: inherit; background-size: inherit; width: 25px; height: 25px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); left: 27px; } Pero como puede ver en el Sandbox a continuación, las franjas no están alineadas correctamente del .container , es decir, no vienen como "continuación" de dicho fondo. ¿Hay algún truco posible que pueda hacer que forme parte del mismo fondo?
Enlace de la caja de arena: https://codesandbox.io/s/hopeful-browser-tnt8zq
Aquí también hay una imagen para referencia. https://i.imgur.com/D3VbYAa.png
Las rayas deben combinarse así, sin importar dónde se coloque la flecha horizontalmente. https://i.imgur.com/kb0uQTK.png
Puede hacer que las cosas sean bastante flexibles, fáciles de cambiar, mediante el uso de variables CSS.
Este fragmento elimina el pseudo elemento, hace que el contenedor sea un poco más grande y recorta la forma requerida. La forma en que está seguro de obtener el fondo correctamente alineado.
Establezca el ancho, la altura y la distancia a lo largo de la parte izquierda del bit puntiagudo según lo requiera en esas variables CSS.
* { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 50px; } .container { --aH: 25px; /* height of the arrow */ --aW: 25px; /* width of the arrow */ --aL: 27px; /* distance along the top of the start of the arrow */ --h: 200px; /* height of container */ height: calc(var(--h) + var(--aH)); width: 100%; background-image: linear-gradient( 45deg, #000000 12.5%, #ffffff 12.5%, #ffffff 50%, #000000 50%, #000000 62.5%, #ffffff 62.5%, #ffffff 100%); background-size: 11.31px 11.31px; position: relative; clip-path: polygon(0 var(--aH), var(--aL) var(--aH), calc(var(--aL) + (var(--aW) / 2)) 0, calc(var(--aL) + var(--aH)) var(--aH), 100% var(--aH), 100% 100%, 0 100%); } <div class="container"></div>ACTUALIZACIÓN: existe un requisito para que la altura del contenedor se fije por su contenido, no por un valor de px. Este fragmento es como el anterior, excepto que la imagen de fondo y su ruta de clip asociada se colocan en el pseudo elemento anterior del contenedor. De esa manera, puede tomar la altura del contenedor y agregar más altura para acomodar la flecha.
* { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 50px; } .container { --aH: 25px; /* height of the arrow */ --aW: 25px; /* width of the arrow */ --aL: 27px; /* distance along the top of the start of the arrow */ position: relative; } .container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; --h: 100%; /* height of container */ height: calc(var(--h) + var(--aH)); width: 100%; transform: translateY(calc(-1 * var(--aH))); background-color: pink; background-image: linear-gradient( 45deg, #000000 12.5%, #ffffff 12.5%, #ffffff 50%, #000000 50%, #000000 62.5%, #ffffff 62.5%, #ffffff 100%); background-size: 11.31px 11.31px; clip-path: polygon(0 var(--aH), var(--aL) var(--aH), calc(var(--aL) + (var(--aW) / 2)) 0, calc(var(--aL) + var(--aH)) var(--aH), 100% var(--aH), 100% 100%, 0 100%); z-index: -1; } <div class="container">some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br></div>Usa este código
.container { height: 200px; width: 100%; background-image: linear-gradient( 45deg, #000000 12.5%, #ffffff 12.5%, #ffffff 50%, #000000 50%, #000000 62.5%, #ffffff 62.5%, #ffffff 100% ); background-size: 11.31px 11.31px; position: relative; } .container::after { content: ""; position: absolute; bottom: 100%; background-image: inherit; background-size: inherit; width: 25px; height: 25px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); left: 48%; top:50%; }Podemos jugar con valores de ruta de recorte y posicionar valores a la izquierda para obtener el resultado deseado.
intente con el siguiente código.
.container::after { content: ""; position: absolute; bottom: 100%; background-image: inherit; background-size: inherit; width: 25px; height: 25px; clip-path: polygon(40% 0%, 0% 100%, 100% 95%); left: 20px; }