Creando un efecto de borde similar a una gota en css

Hola, hemos encontrado la respuesta a tu interrogante, desplázate y la encontrarás más abajo.

Solución:

Definitivamente es posible crear un efecto como este usando CSS3, pero necesitaría más que solo el borde para eso.

En el siguiente ejemplo, he usado un pseudo-elemento con un radial-gradient fondo para imitar el efecto de borde que se muestra en cuestión. Dependiendo de qué lado debería tener el borde, puede ajustar la posición del pseudo elemento para lograr el efecto.

La muestra proporcionada en la respuesta tiene el efecto para el borde superior. Si lo quiere para el borde inferior, puede consultar este muestra. Lo mismo se puede lograr para el borde izquierdo/derecho también, pero necesitaría un poco más de ajuste.

También puede modificar el background-size propiedad para lograr círculos más pequeños o más grandes en el borde. También puede producir un patrón de elipse en lugar de un círculo en el borde usando la palabra clave ellipse en vez de circle en el radial-gradient El valor de la propiedad.

Puntos a tener en cuenta:

1. Precaución: Estoy agregando esta respuesta solo para ilustrar que este efecto es posible de crear usando solo CSS3, pero no lo recomendaría para su uso todavía debido a la compatibilidad relativamente menor del navegador para radial-gradients. Puede usar esto si todos sus navegadores de destino lo admiten.
2. Si necesita este efecto de borde en todos los lados, entonces solo los pseudoelementos no serían suficientes. Necesitará elementos adicionales para cada lado y luego colóquelos según sea necesario.
3. los radial-gradient el fondo también se puede agregar directamente al principal div si el borde solo se requiere en la parte superior. Pero posicionar/lograr este efecto para un borde inferior no sería posible con él y, por lo tanto, con el uso de un pseudoelemento.
4. border-image La propiedad se puede usar para lograr el mismo efecto usando solo bordes, pero eso tiene incluso menos soporte de navegador que radial-gradients (incluso IE 10 no lo admite) y, por lo tanto, no se recomienda/utiliza.
5. El siguiente código fue probado en Firefox, Chrome, Opera y Safari y también debería funcionar en IE 10+ como radial-gradients no son compatibles con IE 9 y menos.

.bordered
    position: relative;
    height: 75px;
    width: 100%;
    border-top: 40px solid black;
    background: #EEE;
    padding-top: 10px;

.bordered:before
    position: absolute;
    content: '';
    top: 0px;
    height: 8px;
    width: 100%;
    background-size: 12px 12px;
    background-position: -5px -3px;
    background-image: -webkit-radial-gradient(50% 0%, circle, black 50%, transparent 55%);
    background-image: -moz-radial-gradient(50% 0%, circle, black 50%, transparent 55%);
    background-image: radial-gradient(circle at 50% 0%, black 50%, transparent 55%);

Lorem Ipsum Dolor Sit Amet

---

Muestras relacionadas:

1. El método para producir un patrón similar pero con cortes triangulares en la parte inferior en lugar de un círculo está disponible aquí – Hacer un borde de triángulo dentado en CSS.

2. El mismo método puede ser utilizado para producir un sello postal como borde arriba y abajo. Una muestra de eso está disponible aquí. También hay una pregunta y respuesta similar aquí que no había encontrado antes de publicar una muestra en esta respuesta.

3. Se puede usar el mismo método para producir un borde que sea el inverso del borde de la gota también (como en la imagen que se muestra a continuación). Una muestra de eso está disponible aquí.

Además de la respuesta de @ Harry – (que es probablemente la mejor manera de abordar esto)…

También podríamos lograr este efecto usando el webkit text-stroke propiedad estableciendo un trazo grueso en un carácter como ‘0’.

Podemos afinar este efecto cambiando el grosor del trazo y el tamaño de fuente del carácter.

div
    position: relative;
    height: 75px;
    width: 100%;
    border-bottom: 20px solid black;
    background: #EEE;
    padding-top: 10px;

div:after
    position: absolute;
    content: '00000000000000000000000000000000000000000000000000000000000';
    font-size: 30px;
    -webkit-text-stroke: 10px black;
    text-stroke: 10px black;
    bottom:-35px;
    left:0;
    width: 100%;
    overflow:hidden;

Lorem Ipsum Dolor Sit Amet

Puntuaciones y comentarios

Recuerda algo, que tienes concesión de decir si te fue preciso.

---

---

Utiliza Nuestro Buscador