For example, in index.html, we have:

<body>
  <iframe id="content"  
   frameborder="0" src="default.aspx" height="500" width="500px" style="border-width: 0px;"></iframe>
</body>

Now, we need to add divs to the four corners and use the css like:

div.topLeft {
  position:fixed;
  left: 0px;
  top: 0px;
  width: 45px;
  height: 45px;
  background-image: url("img/top-left-corner.png");
}

The problem is, how can we add the items in the corners of the iframe when the code is on index.html?

2 answers

BPartch 342
1
point

Why not add the corners to a div in this file then lay the iframe over the top of that:

<body>
 <div id="frameHolder">
  <div class="tl"></div>
  <div class="tr"></div>

   <iframe id="content"  frameborder="0" src="default.aspx" height="500" width="500px" style="border-width: 0px;"></iframe>

  <div class="bl"></div>
  <div class="br"></div>
 </div>
</body>

#frameHolder{
  position:relative;
  width:500px;
  height:500px;
}

.tl,.tr,.bl,.br{width:45px;height:45px;position:absolute}
.tl,.tr{top:0}
.bl,.br{bottom:0}
.tl,.bl{left:0}
.tr,.br{right:0}
.tl{background:url("img/top-left-corner.png") top left no-repeat}
.tr{background:url("img/top-right-corner.png") top right no-repeat}
.bl{background:url("img/bottom-left-corner.png") bottom left no-repeat}
.br{background:url("img/bottom-right-corner.png") bottom right no-repeat}
Answered almost 7 years ago by BPartch
  • I have tried this before, but I realized I need to add the corners when the contents are shown on the iframe (like the curve-cornered divs)... Jronny Silva Amarante almost 7 years ago
o.k.w 2355
0
points

BPatch's recommendation should work. To have a realistic round corner feel, you can try having the corner images floating over the iframe by playing around with the z-index.

See this post for reference.

Answered almost 7 years ago by o.k.w
  • Oh yeah I forgot to mention z-index, sorry about that. BPartch almost 7 years ago
  • you see guys, the users could also visit the page inside the iframe... so there would be no point of putting the div in the content. We only need to put the corners while we render that page on an iframe :-) Jronny Silva Amarante almost 7 years ago
  • and also we need to cover some of the *inside* parts of the iframe... Jronny Silva Amarante almost 7 years ago