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

Ribbon effect with CSS?


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:

Here is the design they want:

Can I do this with CSS?

Many thanks

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 class="triangle triangle_left"></div>
<div class="triangle triangle_right"></div>

<p>Test content goes here Test content goes here Test content goes here</p>
.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;

see the attached output