Help With Ribbon Wraparounds

Hello

I’m trying to create a pair of ribbon wraparounds similar to those in this link, but with CSS only. Except that CSS code isnt rendering. Here is the code:

h1,h2{
	clear:both;
	position:relative;
	color:#fff;
	background:#202020 ;
	text-shadow:0 -1px #d0284b, 0 1px #f96080;
}
h1{
	font-size:14px;;
	text-align:center;
	margin:0 -20px 50px -20px;
	padding:20px 0;
	
	-moz-box-shadow:0 2px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.1);
	-o-box-shadow:0 2px 0 rgba(0,0,0,0.1);
	box-shadow:0 2px 0 rgba(0,0,0,0.1);
}

p{font-family:Arial;
font-size:medium;
font-weight:bold;
}



h2{
	font-size:2em;
	text-align:left;;
	margin:0 -20px 50px -20px;
	padding:20px 0;
	
	-moz-box-shadow:0 2px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.1);
	-o-box-shadow:0 2px 0 rgba(0,0,0,0.1);
	box-shadow:0 2px 0 rgba(0,0,0,0.1);
	border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	
}



h1:before,
h1:after,
h2:before{
	content:" ";
	background:#202020;
	display:block;
	width:10px;
	height:10px;
	position:absolute;
	bottom:0;
	left:0;
	margin-bottom:-10px;
	z-index:-1;
}
h1:after{
	background-color:#202020;
	right:0;
	left:auto;
}
h2{
	font-size:1.5em;
	float:left;
	padding:10px 10px 10px 20px;
	margin-left:-20px;
	margin-bottom:20px;
	
	-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	box-shadow:2px 2px 0 rgba(0,0,0,0.1);
}
h2:nth-of-type(even){
	float:right;
	padding:10px 20px 10px 10px;
	margin-right:-20px;
	
	-moz-box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
	-o-box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
	box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
}
h2:nth-of-type(even):before{
	background-color:FFCC00;
	right:0;
	left:auto;
}

Hi,

I don’t see where you have created the diagonal section needed to create this effect. This is usually done with a mitred border.

There are examples here that you can follow.

Have a try and if you get stuck just shout :smile:

Thnx…I’ll take you up on that

Hey Paul! Just run into problems with your suggestion…It only shows as a small image. Here is the code:

.ribbon h3 {
    display: block;
    height: 30px;
    line-height: 1.3;
    width: 250px
    height:100px;
    margin: 0;
    padding: 5px 10px;
    position: relative;
    left: -16px;
    top: 8px;
    color: #ffffff;
    font-size:22px;
    text-shadow: 0 1px 1px #111;
    border-top: 1px solid #363636;
    border-bottom: 1px solid #202020;
    background: #333;
    background: linear-gradient(top, #383838 0%, #262626 100%);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon h3::before,
.ribbon h3::after {
    content: '';
    display: block;
    width: 250px;
    height:100px;
    
    position: absolute;
    bottom: -11px;
    z-index: -10;
    border: 5px solid;
    border-color: #242424 transparent transparent transparent;    
}
.ribbon h3::before {
left: 0;
 width: 250px;
    height: 100px;
    bottom: -4px;
    border: none;
    border-radius: 10px;}


.ribbon h3::after {right: 0;


}

.ribbon p{font-size:15px;
	font-weight:bold;
	color:#d4ff24;
	
	margin:170px 15px 25px 33px;
	text-shadow:0px 1px 0px #000;
	}

.ribbon2 {
float:right;
width: 250px;
    hright:100px;
    margin: 10px auto;
    padding: 0 10px 0;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

HI,

I can’t really see what you are trying to do there as it doesn’t follow the ribbon example I linked to and there are some weird styles in there. We will need the html also just to be sure.

What does the ribbon look like? It seems you have border radius which will round the mitred border and you have two pseudo elements suggesting a top and bottom effect.

Do you have a drawing of the effect you want?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.