Ask your WordPress questions! Pay money and get answers fast! (more info)

Ribbon effect with CSS?

  • SOLVED

Hi Guys

I have created a site with some content boxes on the home page and my client wants ribbon effect behind the title.

Here are the boxes: http://screencast.com/t/cfgj9I22ckT


Here is the design they want: http://screencast.com/t/Flox8OxkPSw


Can I do this with CSS?

Many thanks
Steve

Answers (5)

2013-05-28

Arnav Joy answers:

yes it can be done via css , using background


Steve Watson comments:

can you do it without using images?


Arnav Joy comments:

let me try that.


Arnav Joy comments:

check this

<div class="bubble">
<div class="banner">
<h2>Global Topics</h2>
</div>
<div class="triangle triangle_left"></div>
<div class="triangle triangle_right"></div>
<div>

<p>Test content goes here Test content goes here Test content goes here</p>
</div>
</div>
<style>
.bubble {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
margin: 0 auto;
position: relative;
width: 25%;
z-index: 90;
}


.triangle_left {
border-color: transparent #E1A223 transparent transparent;
margin-left: -30px;
top: 30px;
}
.triangle {
border-style: solid;
border-width: 15px;
height: 0;
position: relative;
width: 0;
z-index: 80;
}
.triangle_right {
border-color: transparent transparent transparent #E1A223;
margin-left: 100%;
}
.banner h2 {
color: #FFFFFF;
font-size: 22px;
margin-top: 4px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.banner {
background: none repeat scroll 0 0 #E7B550;
float: left;
height: 30px;
left: -15px;
padding: 0 15px;
position: relative;
top: 15px;
width: 100%;
z-index: 100;
}
</style>


see the attached output