ボックスに折り込まれたようなデザイン【リボン】

大きめの帯を左側にはみ出させ、その下に擬似要素で三角形を配置しています。

HTML

<div class="ribbon11-wrapper"> <h3 class="ribbon11">Welcome to My Blog!</h3> <p>サルワカへようこそ！</p> </div>

CSS

.ribbon11-wrapper {
display: block;
position: relative;
margin: 0 auto;
padding: 10px 0;
width: 300px;
background: #f1f1f1;
}
.ribbon11 {
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 10px;
margin: 0 0 0 -20px;
width: calc(100% + 20px);
font-size: 22px;
color: white;
background: #70c7ff;
}
.ribbon11:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #6eb3e0;
}

Javascript

入力無し

解説

シンプルなデザインで織り込んでみた場合です。大きめの帯を左側にはみ出させ、その下に擬似要素で三角形を配置しています。ボックス部分（グレイの部分）は自由に変えてもらってOKですが、ボックスの要素にはposition:relative;を指定するようにしてください。これによりリボンがボックスの裏から折り込まれたように配置されます。