How to keep border inside to take ribbon over to div?

Question

In this example http://jsfiddle.net/aNmvc/15/ the red ribbon should touch the the edges of div which has border. How to achieve that? Is there a way to get border inside or something else?

HTML

<div class="box">
  <div class="corner">
  <span href="#">Best Ribbon around</span>  
   </div>
   <img src="http://lorempixel.com/250/300/sports/1/">
</div>

CSS

.box {border:2px solid green; position:relative;padding:3%; width:260px; background:#ccc; overflow:hidden;}

.corner {
    background-color: #a00;
    overflow: hidden;
    position: absolute;
    left: -3em;
    top: 2.5em;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);

}
.corner span {
    border: 1px solid #faa;
    color: #fff;
    display: block;
    font-size:.8em;
    font-weight:bold;
    padding: 0.5em 4em;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
}

enter image description here

score 2 · Accepted Answer · answered Dec 21 '11 at 06:32

I know you accept @inderanil answers but you can do this with box-shadow property like this:

.box {
    position:relative;
    padding:3%;
    width:260px;
    background:#ccc;
    overflow:hidden;
    -moz-box-shadow: 0 0 0 2px green inset;
    -webkit-box-shadow: 0 0 0 2px green inset;
    box-shadow: 0 0 0 2px green inset;
}

http://jsfiddle.net/aNmvc/18/

score 1 · Answer 2 · answered Dec 21 '11 at 04:50

1

Try this fiddle:

http://jsfiddle.net/aNmvc/16/

Basically, move the border and the background and padding to the image, and that way, the div.box can display till the edge and hide the rest.

answered Dec 21 '11 at 04:50

Indranil

2,451
1
23
31

@Indranil - But in my actual implementation I'm using round corner. which is not perfect of Images http://stackoverflow.com/questions/8444645/how-to-get-perfect-border-radius-on-images-in-all-browsers so I can't add border to images. Only to give perfect round corners to box i added an extra `div` – Jitendra Vyas Dec 21 '11 at 05:01
@JitendraVyas so what you can do is have 2 divs in there. One #box, one inside the #box, say the .imagecontainer, and then the image. – Indranil Dec 21 '11 at 05:03

score 0 · Answer 3 · answered Dec 21 '11 at 04:54

0

I would remove the border, padding, and background color from the box class and add it to the image inside:

.box { position:relative; overflow:hidden;}
.box img { 
    border:2px solid green;
    padding: 10px;
    background:#ccc;
}

answered Dec 21 '11 at 04:54

Nate Cook

92,417
32
217
178

How to keep border inside to take ribbon over to div?

3 Answers3

http://jsfiddle.net/aNmvc/18/