[SOLUCIONADO] Como aplicar border top o añadir triangulos fuera de elemento

[lepe]

HOla gente

Estoy peleandome en CSS para poder aplicar un border top solo a esquinas superiores de un elemento, en realidad sería aplicar dos triangulos superiores con un border ¿Negativo?

Adjunto captura para que lo entiendan mejor
Saludos



https://imgur.com/a/SDAoPiy

[ArturoGallegos]

Con tu planteamiento me he quedado con cara de whats?

Por la imagen quiero pensar que quieres aplicar bordes redondos a las esquinas superiores solamente., si es el caso es simple

border-radius:10px 10px 0 0;

Si no es lo que buscas me temo que has de buscar un mejor planteamiento que no se te entiende nada.

[lepe]

hola

lo que quiero aplicar son los triangulos rojos que se muestran en la imagen para unir el buscador que tiene border-radius inferiores con la cuadricula que muestra los resultados de la busqueda.
Esto con el border-radius positivo que mencionas será imposible conseguirlo

saludos

[ArturoGallegos]

Entonces has de buscar la forma de explicarte mejor, duda, hiciste la prueba?

tienes una imagen del resultado final a obtener?

[Triby]

Lepe, exactamente esa fue la respuesta de ArturoGallegos:

border-radius: esq-sup-izq esq-sup-der esq-inf-der esq-inf-izq;

Aplica a cada esquina el redondeo deseado, o cero para no redondear y pueda "unirse" con el elemento inferior.

[lepe]

HOla buenas

Si ya conozco el funcionamiento del border radius el problema es que el border para conseguir el efecto de un triangulo debería ser NEGATIVO.

Si subo el panel de los resultados de busqueda me oculta el texto en el buscador y no puedo añadirlo un z-index solo al inpu text del buscador.

Imagen del buscador y como deseo que quede el cuadrado inferior de los resultados de busqueda: https://imgur.com/a/pTwruos

Imagen del resultado actual y marco en rojo los 2 triangulos (izquierdo y derecho) que quiero aplicar al panel de resultados que aparece cuando escribo un texto:
https://imgur.com/a/SDAoPiy

[ArturoGallegos]

Pues amiga la invito a documentarse mas, lo que yo le puse con border radius hace exactamente lo que usted pide, tómese la molestia siquiera de probarlo tal como se lo indique., no necesita ser negativo ni mucho menos.

Yo se que muchas veces creemos saber todo lo que necesitamos de X propiedad, pero por lo visto no es así y si no se toma 1 minuto en aplicarlo no hay nada mas que hacer por usted.

[lepe]

Iniciado por ArturoGallegos

Pues amiga la invito a documentarse mas, lo que yo le puse con border radius hace exactamente lo que usted pide, tómese la molestia siquiera de probarlo tal como se lo indique., no necesita ser negativo ni mucho menos.

Yo se que muchas veces creemos saber todo lo que necesitamos de X propiedad, pero por lo visto no es así y si no se toma 1 minuto en aplicarlo no hay nada mas que hacer por usted.

@moder

Primero no soy mujer y si no quieres emplear tiempo en entender una pregunta puedes ahorrarte el comentario de que "tienes documentarte más" porque pase 2 horas haciendo pruebas y probando soluciones desde stackoverflow y todo google sin exito.

Como adjunté en las 2 imagenes previas SE DESEA AÑADIR 2 TRIANGULOS SUPERIORES EN EL EL LISTADO DE RESULTADOS QUE MUESTRA EL BUSCADOR QUE ES RECTO MANTENIENDO EL BORDER RADIUS DEL BUSCADOR SUPERIOR)

Border radius hacia dentro es lo que tu expones que no tiene más misterio y es hacia fuera lo que yo estoy consultando en lo que he estado haciendo pruebas con :befores, contents, absolutes...

[Triby]

Tan sencillo como aplicar el border radius a las esquinas superiores y dejar en cero las inferiores, luego, agregas border-bottom:none; y listo!

Por cierto, no es que ArturoGallegos no quiera entender lo que preguntas, sino que no has probado lo que te responde, con eso, sabrías que solo faltaba quitar el borde inferior para integrarse con el resto del contenido.

Finalmente, si agregas tu código es más factible que recibas mejores respuestas, porque podemos probar con lo que llevas hecho.

[lepe]

Iniciado por lepe

SE DESEA AÑADIR 2 TRIANGULOS SUPERIORES EN EL EL LISTADO DE RESULTADOS QUE MUESTRA EL BUSCADOR QUE ES RECTO MANTENIENDO EL BORDER RADIUS DEL BUSCADOR SUPERIOR)

Vaya, vaya. Siguen sin entender. Se desea saber si es posible añadir 2 triangulos superiores mediante CSS. Otra imagen:

[ArturoGallegos]

Al realizar la búsqueda y obtener resultados agrega una clase al elemento que tiene borde redondo y aplicalo como ya te indique en mi primer respuesta.


.elemento{border-radius:10px;}
.elemento.activo{border-radius:10px 10px 0 0;}


Asi de simple., como te dijo el compañero Triby, si mostraras tu código con todos tus avances quizás obtendrías mas respuestas.
ya sea que pongas a qui tu código o uses un servicio como http://jsfiddle.net/

[lepe]

Iniciado por ArturoGallegos

Al realizar la búsqueda y obtener resultados agrega una clase al elemento que tiene borde redondo y aplicalo como ya te indique en mi primer respuesta.


.elemento{border-radius:10px;}
.elemento.activo{border-radius:10px 10px 0 0;}


Asi de simple., como te dijo el compañero Triby, si mostraras tu código con todos tus avances quizás obtendrías mas respuestas.
ya sea que pongas a qui tu código o uses un servicio como http://jsfiddle.net/

Si eso es lo que hice pero no me termina de convencer porque al buscador redondo no quiero que se cambie el border radius. Cuando doy click al buscador se quita el border radius y hasta que no escribes una busqueda "no aparece el listado de resultados" uniendo ambos elementos y ocultando dicho "active" border eliminado.

La opción active o before no funciona desde un elemento (del listado) a otro (al buscador). Hice muchas pruebas en css pero no se como modificar el listado de resultados ya que aquí actua JS y me pierdo.

Imagine que añadiendo un border radius negativo al listado o añadiendo before podría añadir dos triangulos. (en el jsfiddle no se muestra el listado al que quiero añadir los triangulos)

http://jsfiddle.net/zmry06n7/2/

[ArturoGallegos]

No muchacho (si eres Hombre verdad no me vayas a reclamar de nuevo)

Yo dije que agregues una clase no que uses el evento focus, no es lo mismo., dependiendo como obtengas los datos, es como harás eso.

Suponiendo que usas ajax agregaras la clase en el preciso momento que obtengas valores y muestres esos datos, si arroja error o una respuesta vaciá tu ajax pues no agregas nada o la eliminas.

[lepe]

bueno acabo de conseguir sacar dos triangulos pero necesito darlos la vuelta

Este es el codigo que estaba buscando:

.ui-widget-content:before{
content:'';
border-left: 50px solid red;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
position:absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
}

¿Sabeis como sacar los triangulos al reves?

[mpozo]

Una vez que tienes claro que hay que usar borde con transparencia, es sólo cuestión de ensayo/error

Código CSS:

width: 0;
    height: 0;
    border-bottom: 100px solid #000; 
    border-right: 100px solid transparent;
 

[lepe]

bueno finalmente ya lo conseguí, aporto el codigo por si alguien busca alguna vez como añadir dos triangulos superiores a un elemento

saludos

.ui-widget-content:before{
content:'';
box-shadow: 2px 0 1px -1px #ddd, -1px 0 0px 0px #ddd;
-webkit-box-shadow: 2px 0 1px -1px #ddd, -1px 0 0px 0px #ddd;
-moz-box-shadow: 2px 0 1px -1px #ddd, -1px 0 0px 0px #ddd;
-ms-box-shadow: 2px 0 1px -1px #ddd, -1px 0 0px 0px #ddd;
-o-box-shadow: 2px 0 1px -1px #ddd, -1px 0 0px 0px #ddd;
border-left: 9px solid #fafafa;
border-right: 9px solid #fafafa;
border-top: 15px solid transparent;
position:absolute;
top: -.8rem;
left: 0;
right: 0;
width: 100%;
}