Ribbon effect with CSS? WordPress
- 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)
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