0

Lets say i have a parent block level element like so:

#parent {
 width: 100px;
 height: 100px;
}

and a child element like so:

#child {
 width: 100px;
 height: 100px;
 margin-left: 50px;
 margin-top: 50px;
}

and the elements are embedded like so:

<div id="parent">
  <div id="child>
  </div>
</div>

I want to create an effect where only top left part of the child div shows up in the bottom right corner. 3 corners of the child div are completely gone. How can i achieve this using just css?

1 Answer 1

0

Did you try using overflow:hidden on the #parent div in combination with position values?

Something like this?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
#parent {
 width: 100px;
 height: 100px; 
 background-color:#FFCCFF;
 overflow:hidden;
 position:relative;
}
#child {
 width: 100px;
 height: 100px;
 position:absolute;
 top:50px;
 left:50px;
 background-color:#99CC99;
}
</style>

</head>

<body>
    <div id="parent">
        <p>text</p>
    <div id="child">
            <p>text</p>
    </div>
</div>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.