CODEWITHSUNDEEP
css
davidcondrey
davidcondrey

Reputation: 35983

Add border to bottom of ribbon

I've created a vertical ribbon but am stuck trying to get the final part of it done. I need to add a 2 px red border to the bottom angles as illustrated in the image.

.thumbnails .span4 { position:relative;height:300px; }
.ribbon { position:absolute;float:right;margin-right:20px;height:87px;width:75px; }
.ribbon { background: #f6f6f6;border-radius: 1px 1px 0 0;height: 87px;margin: 0 auto;position: absolute;width: 74px;right:20px; }
.ribbon:after,.ribbon:before { border-top: 12px solid #f6f6f6;content: '';height: 0;position: absolute;top: 100%;width: 0; }
.ribbon:after { border-left: 74px solid transparent; }
.ribbon:before { border-right: 74px solid transparent; }
.img-box { height:205px;display:block; }

<div class="span4 thumb crop">
    <div class="ribbon"></div>
    <div class="img-box"></div>
    <div class="caption">
        <h1>Title</h1>
        <p>Text</p>
    </div>
</div>

enter image description here

Upvotes: 1

Views: 134

Answers (1)

bh--
bh--

Reputation: 51

If you want a pure CSS solution, you might use transform:skew instead of transparent gradients to create the pseudo elements.

You could potentially attempt box shadows with no spread on those skewed pseudo elements, but a better result would probably require additional (non-semantic) divs for the decoration:

<div class="ribbon">
    <div class="ribbonDecoration left"></div>
    <div class="ribbonDecoration right"></div>
</div>

.ribbon { 
    position:absolute;
    margin-right:20px;
    height:87px;
    width:75px; 
    background: #f6f6f6;
    border-radius: 1px 1px 0 0;
    height: 87px;
    position: absolute;
    width: 74px;
    right:20px; 
}

.ribbon:after,
.ribbon:before { 
    content: '';
    display: block;
    height: 10px;
    position: absolute;
    top: 94%;
    width: 50%;
    z-index: 0;
    background: #f6f6f6;
}

.ribbon:after {
    left: 50%;
    -moz-transform: skew(0,15deg);
    -webkit-transform: skew(0,15deg);
    transform: skew(0,15deg);
}

.ribbon:before {
    -moz-transform: skew(0,-15deg); 
    -webkit-transform: skew(0,-15deg);
    transform: skew(0,-15deg);
}    

.ribbonDecoration {
    position: absolute;
    bottom: -6px;
    height: 3px;
    width: 50%;
    background: red;
    z-index: 1;
}

.ribbonDecoration.left {
    -moz-transform: skew(0deg,-15deg);
    -webkit-transform: skew(0deg,-15deg);
    transform: skew(0deg,-15deg);
}

.ribbonDecoration.right {
    left: 50%;
    -moz-transform: skew(0deg,15deg);
    -webkit-transform: skew(0deg,15deg);
    transform: skew(0deg,15deg);
}

here's a fiddle: http://jsfiddle.net/brianhewitt1/bL5p7sg7/

I'd recommend sticking to even divisors of 90 degrees for (e.g., 15 deg, 30 deg) for better rendering. Things can get janky and pixelated otherwise.

The other options (if your browser support requirements allow...) would be an svg background image or an html5 canvas element.

(FYI, as a side note, float won't do any good with an absolutely positioned element)

Upvotes: 1

Related Questions