Como criar uma faia Ribbon

[mruoppolo 14]

Olá, tudo bem?

Eu preciso criar uma faixa ribbon para alguns cursos da empresa onde trabalho, mas não estou conseguindo, eu preciso que fique assim:

Eu estou com o seguinte código:

.wrapper {
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
	overflow: hidden;
	position: absolute;
  	left: 0;
	top: 0;
	display: block;
	width: 33.3%;
	height: 100%;
	z-index: 1;
}

.ribbon-green {
	color: white;
	clear: both;
	float: left;
	font-size: 2.8em;
	font-family: 'proxima_nova_bold', 'Helvetica', Arial, sans-serif;
	height: auto;
	margin: 0;
	text-transform: uppercase;
	width: 100%;
	padding-top: 50px;
	font-weight: normal !important;
	background-color: #6c7988;
	display: block;
	height: 74px;
	width: 100%;
	margin: 24px auto 14px;
	line-height: 74px;
	text-align: center;
	font-family: 'proxima_nova_bold', 'Helvetica', Arial, sans-serif;
	-webkit-transform: rotate(-11deg) skew(-11deg);
	-moz-transform: rotate(-11deg) skew(-11deg);
	-o-transform: rotate(-11deg) skew(-11deg);
	-ms-transform: rotate(-11deg) skew(-11deg);
	transform: rotate(-11deg) skew(-11deg);
	position: absolute;
	z-index: 11;
	left: -3%;
	cursor: default;
	box-sizing: content-box;
	padding: 0 3%;
	font-weight: normal !important;
}

E o html esta assim:

<div class="wrapper">
	<div class="ribbon-wrapper-green"><div class="ribbon-green">EM BREVE</div></div>
	<div class="frontComingSoon">
		<div class="image_header_10">
			<img src="https://2u73yw1js4sv27hrtfr66c4k-wpengine.netdna-ssl.com/wp-content/uploads/2016/10/mail_campaign.svg" alt=""> 
		</div> 
		<div class="frontTitle">
			<h3 style="text-align:center;">E-Mail Marketing: Tenha Campanhas Automáticas com Alta Taxa de Abertura</h3>
		</div> 
		<p style="text-align:center;"></p>
	</div><!--front-->
</div>

Mas esta ficando assim:

Se quiser ver a página é esta aqui: https://goo.gl/EDUSZT

Você sabe me dizer o que esta errado??

Muito obrigado :D

[Public2004 79]

Na sua classe: "ribbon-wrapper-green" altere o width para 100%.

Altere também o "position" e "padding" do topo (top). Ou utlize alguma técnica para centralizar verticalmente. Quanto aos cantinhos (sombras/dobras) aí já é outro papo...

Att.

[mruoppolo 14]

Eu mudei, ficou assim:

.ribbon-wrapper-green {
	overflow: hidden;
	position: absolute;
  	left: 0;
	top: 50px;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
}

Esta quase lá, agora ficou com esta aparência:

Mas não estou conseguindo fazer ficar 100% do tamanho

[Public2004 79]

Alteração sugerida:

.ribbon-wrapper-green {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    /*
    width: 33.3%;
    */
    height: 100%;
    z-index: 1;
    
    width: 100%;
    padding-top: 15%;
}

Largura para 100%, position-top permanece em 0 e o padding-top é para a "ribbon" não ficar colado no topo. Esse ajuste fica a seu critério.

Att.

[mruoppolo 14]

Cara então, eu editei minha postagem acima, eu fiz agora do jeito que você falou, mas o resultado ainda é este aqui:

[Public2004 79]

Então você precisa ajustar a div "wrapper" ao seu elemento pai, esse com fundo verde...

Ou deixe a div "ribbon-wrapper-green" sobre a div "wrapper" e altere a ordem das camadas (z-index)

...
<div class="ribbon-wrapper-green"><div class="ribbon-green">EM BREVE</div></div>
    <div class="wrapper">...

Att.

[mruoppolo 14]

Então a div pai na verdade é a wrapper

.wrapper {
	position: relative;
	z-index: 90;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	clear: both;
	float: left;
	margin: 0;
	padding: 0!important;
}

Porque o html esta assim:

<div class="wrapper"> 
	<div class="ribbon-wrapper-green">
		<div class="ribbon-green">EM BREVE</div>
	</div> 
	<div class="frontComingSoon"> 
		<div class="image_header_10"> 
			<img src="https://2u73yw1js4sv27hrtfr66c4k-wpengine.netdna-ssl.com/wp-content/uploads/2016/10/mail_campaign.svg" alt=""> 
		</div> 
		<div class="frontTitle"> 
			<h3 style="text-align:center;">E-Mail Marketing: Tenha Campanhas Automáticas com Alta Taxa de Abertura</h3> 
		</div> 
		<p style="text-align:center;"></p> 
	</div>
</div>

Mas eu já coloquei margin:0; e padding:0; e mesmo assim parece que ela ainda tem um padding

[mruoppolo 14]

Eu tirei as divs do ribbon de dentro da wrapper, ai ficou assim:

[Public2004 79]

De acordo com o código-fonte da página, acima da div "wrapper" você tem mais duas divs (containers):

<div class="et_pb_column et_pb_column_1_3 et_pb_column_11">
  <div class="et_pb_code et_pb_module  et_pb_code_10">
    <div class="wrapper">
      <div class="ribbon-wrapper-green">
        <div class="ribbon-green">EM BREVE</div>
      </div>...

Assim, ou você muda a posição da div como sugeri, ou tem q ver nas divs acima os ajustes de padding, mas em se tratando de wp, não sei a complexidade disso...

Att;

[mruoppolo 14]

Cara era isso mesmo, muito obrigado a et_pb_module_8 estava com padding:30px;

Valeu