1

hola que tal tengo una duda con respecto a css y como puedo lograr el diseño que me piden mostrar la parte de verde y amarillo el div que esta inclinado lo hago con transform: matrix(); pero lo que no se es como ocultar la parte roja

aca se ven dos 2 div uno sobre otro

el resultado debe ser asi:

introducir la descripción de la imagen aquí

ademas de eso se pondra un texto en la parte amarilla

ayuda no se como hacer eso

este seria el codigo

<html>
<head>
    <title>ejemplo</title>
    <style>
        .contenedor{
            margin-top:100px;
            height:100px;
            text-align:center;
            border-color:green;
            border-style:solid;              
        }
        .contenido{
            transform: matrix(0.98, 0.17, 0.2, -0.98, 0, 0);
            -ms-transform: matrix(0.98, 0.17, 0.2, -0.98, 0, 0);
            -webkit-transform: matrix(0.98, 0.17, 0.2, -0.98, 0, 0);
            border-radius: 20px;
            position: absolute;
            width: 191.39px;
            height: 149.09px;
            left:87%;
            top:1%;
            border-color:red;
            border-style:solid;

        }
    </style>
</head>
<body>
    <div class="contenedor">
        <div class="contenido">
        </div>
    </div>
</body>

me sale este resultado pero no lo necesitan si sino que salga el div verde incluyendo la parte del div rojo que esta dentro

introducir la descripción de la imagen aquí

1 respuesta 1

2

Por favor incluye ejemplo de tu código html y css. Suponiendo que tienes tu caja verde como .contenedor y dentro tienes tu otra caja roja .contenido. Podrías hacer algo como esto.

<div class="contenedor">
  <div class="contenido">
  </div>
</div>

.contenedor {
  overflow:hidden;
}
1
  • También se debe cambiar el valor position del contenido, y reubicarlo Commented el 4 dic. 2018 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.