como lograr estos 2 diseños con css

[helacer]

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

[ArturoGallegos]

[xfxstudios]

Prueba asi:

Código HTML:

<style>
    .primero{
        width:300px;
        height:180px;
        padding-bottom:15px;
        position: absolute;
        background-image : url(https://upload.wikimedia.org/wikipedia/commons/b/bc/Atardeceres_Pampeano.jpg);
        background-size:cover;
        background-position:center;
        background-color:#ff0080;
    }
    .segundo{
        width:90%;
        height:90%;
        color:#ffffff;
        position:relative;
        background-color:#333333;
        margin-left:auto;
        margin-right:auto;
    }
</style>
<div class="primero">
    <div class="segundo">
        <p>Hola</p>
    </div>
</div>
 

Ver Muestra

[helacer]

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!

[ArturoGallegos]

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.