like about putting a div with css and that only part of this div can be seen

Question

like about putting a div with css and that only part of this div can be seen

Navigation

#1 by (1 votes)

0

hi how I have a doubt about css and how can I achieve the design that I am asked to show the green and yellow part the div that is inclined I do it with transform: matrix (); but what I do not know is how to hide the red part

the result should be like this:

besides that, a text will be placed in the yellow part

help I do not know how to do that

this would be the code

<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>

I get this result but you do not need it if you leave the green div including the part of the red div that is inside

css3 css css-transform div

asked by emilio paredes 04.12.2018 в 01:01

source

1 answer

Remove items from a Linear Layout Android Studio PostgreSQL, stored procedure to update a table

score 1 · Accepted Answer

Please include example of your html and css code. Assuming you have your green box as .contenedor and inside you have your other red box .contenido . You could do something like this.

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

.contenedor {
  overflow:hidden;
}