Cuando comencé a meterme con el código, las esquinas redondeadas requieren cinco imágenes de fondo o una Imagen elfo Tal vez creado en Photoshop, entonces border-radius Al ingresar a la escena, recuerdo que todos pensaron que era lo mejor de la historia. El diseño web en ese momento era muy cuadrado border-radius Muy bien, también nos ahorra mucho tiempo.
Chris border-radius Artículos de 2009al momento de escribir, tenía 16 años (espera, cuántos años tiene I? ! ), incluidos los prefijos de proveedores para navegadores web antiguos, incluidos «navegadores de konqueror antiguos» (-khtml-border-radius). ¡Qué tiempo de vida!
Hoy, estamos menos entusiasmados con las esquinas redondeadas. De hecho, las esquinas afiladas están de regreso y ahora son populares, olas (cuadrados cuadrados o redondos, elige su elección), que es exactamente lo que corner-shape Las propiedades de CSS nos permiten crear (además, lo guiaré a través de muchos otros efectos geniales de la interfaz de usuario hoy).
Al escribir, solo Soporte de Chrome 139 y superior corner-shapedebe estar con border-radius Atributos o/y cualquier atributo personal relacionado (es decir, border-top-left-radius,,,,, border-top-right-radius,,,,, border-bottom-right-radiusy border-bottom-left-radius)
Use la esquina de la incisión corner-shape: bevel
Estas esquinas rotas Con el abrazo de los diseñadores de la interfaz de usuario, se está volviendo cada vez más popular Estética salvaje.
En el ejemplo anterior, es tan fácil como usar corner-shape: bevel Para el efecto de la esquina de la incisión, luego border-bottom-right-radius: 16px Adecuado para tamaños.
corner-shape: bevel;
border-bottom-right-radius: 16px;Podemos hacer lo mismo, y funciona con la estética cyberpunk:
Uso de la parte inclinada corner-shape: bevel
La parte inclinada es un efecto visual, es más popular y puede que nunca vuelva a ir a ningún lado, ayudará a los elementos a parecer cajas.
Sin embargo, antes de profundizar, es importante recordar que cada radio de borde tiene dos ejes medio músculo, uno horizontal y otro vertical, y cada eje tiene un «punto» (usando terminología vectorial). En el ejemplo anterior, ambos están establecidos en 16pxentonces ambos puntos se mueven a lo largo de sus respectivos ejes, dejar Por supuesto, comience desde sus esquinas y luego dibuje cortes entre ellos. Sin embargo, en el ejemplo de la sección de inclinación a continuación, necesitamos proporcionar un valor de punto diferente para cada eje, por ejemplo:
corner-shape: bevel;
border-bottom-right-radius: 100% 50px;
Sigue avanzando en el primer punto 100% eje horizontal, y el segundo punto está conduciendo 50px Eje vertical, luego dibuje cortes entre ellos, creando la pendiente que ves arriba.
Por cierto, tener diferentes valores para cada eje y radio límite son esas formas de enfriamiento Manchas de radio límite Producción.
Etiquetas de ventas utilizadas corner-shape: round bevel bevel round
Puede ver estas etiquetas de ventas en casi todos los sitios web de comercio electrónico, ya sean imágenes o esquinas redondeadas, en lugar de esquinas afiladas (otras tecnologías no valen la pena). Pero ahora podemos usar dos tipos diferentes corner-shape Al mismo tiempo, y todo el valor de radio límite:
Necesitas corner-shape: round bevel bevel round comenzar. Comience en sentido horario desde la esquina superior izquierda, de la siguiente manera:
- Arriba a la izquierda
- Ala derecha
- Esquina inferior derecha
- Inferior a la izquierda
Solo como border-radius. tú capaz Algunos valores se omiten y se infieren de otros, pero tanto la lógica de inferencia como la sintaxis del valor del resultado carecen de claridad, por lo que solo estoy evitando esto, especialmente porque vamos a explorar una más compleja. border-radius:
corner-shape: round bevel bevel round;
border-radius: 16px 48px 48px 16px / 16px 50% 50% 16px;El lado izquierdo de la línea diagonal delantera (/) Tenemos el valor del eje horizontal de cada ángulo en el orden anterior, /valor del eje vertical. Por lo tanto, está claro que los valores primero y quinto corresponden a la misma esquina, el segundo y sexto valores, etc., y así sucesivamente. Si es más fácil de leer, puede desentrañar la taquigrafía:
border-top-left-radius: 16px;
border-top-right-radius: 48px 50%;
border-bottom-right-radius: 48px 50%;
border-bottom-left-radius: 16px;Hasta ahora, realmente no necesitamos comprender completamente la sintaxis del radio límite. Pero ahora tenemos corner-shapedefinitivamente vale la pena.
En cuanto al valor real, 16px Correspondiente a round Esquina (esto es fácil de entender) 48px 50% El valor es bevel Esto significa que las esquinas se extraen de él 48px Nivelar 50% Vertical, por eso entran en cierto punto.
Sobre los bordes, sí, si lo son, la parte puntiaguda se verá mejor Levemente Circular, pero usa borderarena outlineSe producen resultados impredecibles en estos elementos debido a cómo el navegador dibuja esquinas (pero sospecho) Lo siento.
Aseguras de flecha utilizando el mismo método
Sí, lo mismo.
Básicamente, tenemos una fila de cuadrícula con márgenes negativos, pero dado que no podemos crear flechas de «ilustración» o usar bordes/contornos, tenemos que crear un efecto en el que los bordes falsos de algunas flechas están sangrando a la siguiente. Esto es anidando exactamente la misma forma en la flecha y luego aplicando algo para padding-right: 3pxDónde 3px es el valor de los límites potenciales. Los siguientes comentarios del código deben explicarse con más detalle (código completo Bolígrafo Pero es muy interesante):
<nav>
<ol>
<li>
<a>Step 1</a>
</li>
<li>
<a>Step 2</a>
</li>
<li>
<a>Step 3</a>
</li>
</ol>
</nav>ol {
/* Clip n’ round */
overflow: clip;
border-radius: 16px;
li {
/* Arrow color */
background: hsl(270 100% 30%);
/* Reverses the z-indexes, making the arrows stack */
/* Result: 2, 1, 0, ... (sibling-x requires Chrome 138+) */
z-index: calc((sibling-index() * -1) + sibling-count());
&:not(:last-child) {
/* Arrow width */
padding-right: 3px;
/* Arrow shape */
corner-shape: bevel;
border-radius: 0 32px 32px 0 / 0 50% 50% 0;
/* Pull the next one into this one */
margin-right: -32px;
}
a {
/* Same shape */
corner-shape: inherit;
border-radius: inherit;
/* Overlay background */
background: hsl(270 100% 50%);
}
}
}Servicio de herramientas corner-shape: scoop
Para crear este estilo de información sobre herramientas, utilicé surgir,,,,, Posicionamiento de anclaje (Coloque el careto en relación con la información sobre herramientas) y corner-shape: scoop. La forma masculina es la misma que la flecha utilizada en el ejemplo anterior, así que cambie en cualquier momento scoop llegar bevel Si te gustan las comidas herramientas de triángulo clásico.
Tutorial rápido:
<!-- Connect button to tooltip -->
<button popovertarget="tooltip" id="button">Click for tip</button>
<!-- Anchor tooltip to button -->
<div anchor="button" id="tooltip" popover>Don’t eat yellow snow</div>#tooltip {
/* Define anchor */
anchor-name: --tooltip;
/* Necessary reset */
margin: 0;
/* Center vertically */
align-self: anchor-center;
/* Pin to right side + 15 */
left: calc(anchor(right) + 15px);
&::after {
/* Create caret */
content: "";
width: 5px;
height: 10px;
corner-shape: scoop;
border-top-left-radius: 100% 50%;
border-bottom-left-radius: 100% 50%;
/* Anchor to tooltip */
position-anchor: --tooltip;
/* Center vertically */
align-self: anchor-center;
/* Pin to left side */
right: anchor(left);
/* Popovers have this already (required otherwise) */
position: fixed;
}
}Si quieres que se desplomen, entonces viene API de llamadas de interés Eso es lo que estás buscando.
Uso de resaltado realista corner-shape: squircle bevel
este <mark> Elementos para resaltar semántico, por defecto para tener un fondo amarillo, pero no producen un efecto de resaltador por completo. Al agregar las siguientes dos líneas de CSS, puedo encontrar al experimentar con valores completamente aleatorios que podemos hacer que se parezca más a un resaltado de mano:
mark {
/* A...squevel? */
corner-shape: squircle bevel;
border-radius: 50% / 1.1rem 0.5rem 0.9rem 0.7rem;
/* Prevents background-break when wrapping */
box-decoration-break: clone;
}
También podemos usar squircle Puede crear esos elegantes iconos de aplicaciones por sí solo, o usarlos en botones/tarjetas/controles de formulario/etc. Si crees que el radio límite «antiguo» comienza a verse un poco rancio:
Caja dibujada a mano usando el mismo método
Lo mismo es solo más grande. ¿Es un poco como una caja pintada a mano?
Es cierto que este efecto no se ve tan bien a mayor escala, por lo que si realmente quieres sorprender y crear más similar a Estética de redención de la muerte roja,,,,, este border-image método Sería mejor.
Clip de fondo corner-shape: notch
El radio de límite caídos es feo y no escucharé nada más. No creo que quieras usarlos para crear imágenes, pero entiendo que si establece un eje irrelevante como un clip de fondo 50% y el eje del eje lateral que quieres sujetar. Entonces, si quieres editar 30px Por ejemplo, desde el fondo de la izquierda elegirás 30px Para el eje horizontal y 50% Para el eje vertical (para -left-radius Por supuesto solo atributos).
corner-shape: notch;
border-top-left-radius: 30px 50%;
border-bottom-left-radius: 30px 50%;
en conclusión
entonces, corner-shape En realidad es muy divertido. Por supuesto, tiene más usos de los que esperaba, y no hay duda de que encontrará algunos experimentos. Con eso en mente, lo dejo a sus tricksters CSS en el desorden (pero recuerde que necesita usar Chrome 139 o posterior).
Como regalo para la separación, te traigo un luchador CSS de CSS muy genial pero totalmente inútil, por corner-shape y posicionamiento de anclaje:
