1

Ok, so I have asked a question and received help on creating an image with pure CSS, located here: Ribbon and stars - How to get this done without an image file?

But this method, puts a border-color on the image sides in order to make the ribbon corner effect. But now I need to do something like the image below:

Ribbon with Background on half of the height

So, not sure how to do this using the method of the Ribbon provided here (if even possible): http://jsfiddle.net/a498M/1/

I believe that this is possible to do in CSS with HTML, just need some help on how to implement this. Here is the code I have so far on this:

CSS:

div.name_container {
    text-align: center;
}
h1 {
    font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
    font-size: 2.2em;
    margin: 0 auto;
    background:#BF2C24;
    display: inline-block;
    padding: 0 1.5em;
    color: #f2efe9;
    position: relative;
    height: 1.4em;
    line-height: 1.4em;
    text-transform: uppercase;
    z-index: 10;
}
h1:before { /* this will create white triangle on the left side */
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    height: 0px;
    width: 0px;
    border-top: .7em solid transparent;
    border-left: .7em solid #f2efe9; 
    border-bottom: .7em solid transparent;
    z-index: 8;
}
h1:after { /* this will create white triangle on the right side */
    position: absolute;
    content: "";
    top: 0px;
    left: auto;
    right: 0px;
    height: 0px;
    width: 0px;
    border-top: .7em solid transparent;
    border-right: .7em solid #f2efe9; 
    border-bottom: .7em solid transparent; 
    z-index: 8;
}
h1 span.sidestar-left, h1 span.sidestar-right {
    position: absolute;
    font-size: .6em;
    top: 0;

}
h1 span.sidestar-left {
    left: 1.8em;
}
h1 span.sidestar-right {
    right: 1.8em;
}

HTML:

<div class="name_container">
    <h1><span class="sidestar-left">&#9733;</span>&nbsp;&nbsp;Kristine&nbsp;Coady&nbsp;&nbsp;<span class="sidestar-right">&#9733;</span></h1>
</div>

So, I need to add a div element somehow underneath of this ribbon, but how can I do this without it looking like this?

Problem with h1:after and h1:before bordering

So, the h1:after and h1:before is causing this issue. Is it possible to get this ribbon effect without this bordering which is causing the color problem? I need it to look like the first image, where it it transparent and the image under it shows through, or maybe I can give the top-half of the border 1 color and the bottom-half of the border a different color perhaps? but How??

Community
  • 1
  • 1
Solomon Closson
  • 6,111
  • 14
  • 73
  • 115

1 Answers1

2
border-top: 20px solid #A52927;
border-right: 20px solid transparent; 
border-bottom: 20px solid #A52927;
margin-right:-20px;

That's for the ride side. It was a fairly simple fix. Hope this helps!

ndugger
  • 7,373
  • 5
  • 31
  • 42
  • Or I suppose you could just use the right positioning to be -20px instead of applying a margin on it. Both methods will work, so it's up to you, of course. – ndugger Aug 20 '13 at 21:05
  • What?? This edit turns the red part back into a square, instead of a ribbon. This is not at all what I want! – Solomon Closson Aug 20 '13 at 21:07
  • It worked just fine in the jsfiddle, so I dunno what to tell you. That's a bit odd. Did you make sure to apply the negative margin-right to it? – ndugger Aug 20 '13 at 21:08
  • Here you are. I set the body background to grey so you could tell that it was working. http://jsfiddle.net/a498M/2/ It appears I mucked up the css a bit, by not pasting over yours, simply after it; but you should be able to still get the same effect. – ndugger Aug 20 '13 at 21:09
  • I can't get this to work here: http://opportunityfinance.net/Test/newest_conference-2013/meetcandidates.html as you can see it makes the ribbon square adding the `-.7em` to the margins – Solomon Closson Aug 20 '13 at 21:12
  • Also, can you base it from the code that I provided, not the JSFiddle that this other person provided in the other answer? – Solomon Closson Aug 20 '13 at 21:13
  • 1
    Sure, give me a few minutes. Glad to help out. – ndugger Aug 20 '13 at 21:15
  • Wait, hold on, I think I know what's going on now... You changed all of those values... I only changed the `margin-right`, give me a sec – Solomon Closson Aug 20 '13 at 21:17
  • Yeah, I had changed more. Anyways, here's a working fiddle: http://jsfiddle.net/w84bu/ You'll notice that the top positioning on the pseudo elements is .71 isntead of .7, becuase I was getting an odd bug where it was 1 pixel too short for some reason. Feel free to adjust it back to .7 or whatever you want. – ndugger Aug 20 '13 at 21:21
  • If you stretch out that example it doesn't work, it starts to come apart. When you make the window bigger, it starts to break! – Solomon Closson Aug 20 '13 at 21:24
  • Possibly due to the fact that you're using 'ems. It would probably not have the same issue were you to use pixel values. Sadly enough, I cannot see another method of doing what you're asking for, though. – ndugger Aug 20 '13 at 21:26
  • The other person suggested using `opacity` what about that? Would that actually work? – Solomon Closson Aug 20 '13 at 21:30
  • I don't understand what role opacity has in this. It seems he dropped it in, trying to get reputation points. – ndugger Aug 20 '13 at 21:32
  • Ok, so I noticed that if you give a `border-left` and `border-right` to the actual `h1` element with the same color and size it to atleast `.04em` (although I have chosen `.05em` to be sure), than the problem with the borders separating from the rest of the `h1` goes away. I guess that's the best we can do for now! Thanks and marking this as solved! – Solomon Closson Aug 20 '13 at 21:42
  • Am thinking that I will need to atleast conver this to pixels partially, if possible, since `ems` are not working correctly in IE 9. If you have ideas please let me know... Thanks – Solomon Closson Aug 20 '13 at 21:48
  • Actually, I got it working using pixels and looks nice for the most part in all screen resolutions. Cheers :) `ems` just doesn't cut it! – Solomon Closson Aug 20 '13 at 22:00