Foros del Web » Creando para Internet » Diseño web »

como lograr estos 2 diseños con css

Estas en el tema de como lograr estos 2 diseños con css en el foro de Diseño web en Foros del Web. buenas soy desarrollador web, pero actualmente estoy haciendo algo de frontend y estoy un poco enredado sobre como lograr esotos 2 efectos, especialmente el del ...
  #1 (permalink)  
Antiguo 09/08/2018, 19:10
 
Fecha de Ingreso: mayo-2006
Ubicación: Bogotá
Mensajes: 2.049
Antigüedad: 12 años, 3 meses
Puntos: 50
como lograr estos 2 diseños con css

buenas


soy desarrollador web, pero actualmente estoy haciendo algo de frontend y estoy un poco enredado sobre como lograr esotos 2 efectos, especialmente el del borde del cuadro rosado.

El triangulo logro pintarlo con CSS pero no logro ubicarlo correctamente como se ve en la imagen , me pueden dar un ejemplo por favor







EDITO Ya logre el efecto del triangulo en la iamgen si alguien lo desea congusto lo comparto pero les pido el favor me ayuden con el borde del rectangulo rosado que no e encontrado como hacerlo, gracias!

gracias

Última edición por helacer; 09/08/2018 a las 21:20
  #2 (permalink)  
Antiguo 10/08/2018, 10:04
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.074
Antigüedad: 10 años, 5 meses
Puntos: 991
Respuesta: como lograr estos 2 diseños con css

__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 10/08/2018, 20:16
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.364
Antigüedad: 3 años, 1 mes
Puntos: 253
Respuesta: como lograr estos 2 diseños con css

Prueba asi:

Código HTML:
Ver original
  1.     .primero{
  2.         width:300px;
  3.         height:180px;
  4.         padding-bottom:15px;
  5.         position: absolute;
  6.         background-image : url(https://upload.wikimedia.org/wikipedia/commons/b/bc/Atardeceres_Pampeano.jpg);
  7.         background-size:cover;
  8.         background-position:center;
  9.         background-color:#ff0080;
  10.     }
  11.     .segundo{
  12.         width:90%;
  13.         height:90%;
  14.         color:#ffffff;
  15.         position:relative;
  16.         background-color:#333333;
  17.         margin-left:auto;
  18.         margin-right:auto;
  19.     }
  20. <div class="primero">
  21.     <div class="segundo">
  22.         <p>Hola</p>
  23.     </div>
  24. </div>

Ver Muestra
__________________
[email protected]
HITCEL

Última edición por xfxstudios; 10/08/2018 a las 20:23
  #4 (permalink)  
Antiguo 12/08/2018, 10:44
 
Fecha de Ingreso: mayo-2006
Ubicación: Bogotá
Mensajes: 2.049
Antigüedad: 12 años, 3 meses
Puntos: 50
Respuesta: como lograr estos 2 diseños con css

gracias a los 2 por responder, pero creo que no supe expresar mi problema.

MI inconveniente es que no se como crear esos bordes imperfectos o desgastados del cuadro con CSS.

me pueden colaborar con esto, gracias!
  #5 (permalink)  
Antiguo 12/08/2018, 12:50
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.074
Antigüedad: 10 años, 5 meses
Puntos: 991
Respuesta: como lograr estos 2 diseños con css

Lo siento carnal, me temo que con CSS no es posible hacer una figura tan imperfecta, deberás hacerla con photoshop o algún editor de imágenes.... para después usar esa imagen como background de tu contenedor.

Mucha suerte con tu objetivo.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....



La zona horaria es GMT -6. Ahora son las 12:29.