how to hide parts of an element on top of another element
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 开发者_JAVA技巧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?
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>
加载中,请稍侯......
精彩评论