cssのみで実装する、見出しや背景に使えそうなテクニックを紹介します。

ストライプの見出し背景

.stripe{
border:2px solid #f8f8f8;
padding: 5px;
background: repeating-linear-gradient(90deg, #f8f8f8, #f8f8f8 10px, #fff 0, #fff 20px);
}
.stripe.n-border{
border:none;
}

backgroundをrepeating-linear-gradientで指定しています。

90degの所を-45degにすれば左斜線に、45degにすれば右斜線になります。

あとはお好きな色と、幅に

repeating-linear-gradient(ストライプの角度, 色1 始点, 色1 終点, 色2 始点、色2 終点[, 色3 始点, 色3 終点, …])

こういう指定方法になります。

よくある吹き出し

吹き出し

.block{
position:relative;
}
.block p{
display: inline-block;
}
.arrow_box,.arrow_box_over{
background-color: #fff5de;
border-radius: 4px;
-webkit-border-radius: 4px;
position: relative;
display:inline-block;
padding: 5px 15px;
}
.arrow_box:after,.arrow_box_over:after{
width: 0;
height: 0;
content: "";
position: absolute;
bottom: 0px;
left:2px;
}
.arrow_box:after,.arrow_box_over:after{
border-top: 10px solid #fff5de;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 0px solid transparent;
top: 50%;
margin-top: 18px;
}
.arrow_box_over{
position: absolute;
top: -70px;
left:0;
display:none;
}
.over:hover + .arrow_box_over{
display: inline-block;
}

擬似要素にborderで三角を作成し、position:absoluteで位置を指定します。
マウスが乗った時に表示させるのは、display:noneで隠しておいて、hoverでdisplay:inline-blockに変更しています。

画像の上にありそうな”NEW”とかのラベル

画像とか入れて

.triangle {
background: #fafafa;
width: 250px;
text-align: center;
height: 100px;
border: #eee 1px solid;
margin: 0 auto;
position: relative;
}
.triangle:before {
content: "";
top: 0;
left: 0;
border-bottom: 4em solid transparent;
border-left: 4em solid #c12748;
position: absolute;
z-index: 100;
}
.triangle:after {
content: "New!";
display: block;
top: 5px;
transform: rotate(-45deg);
color: #fff;
left: 0;
position: absolute;
z-index: 101;
}

今回はpタグに入れて見ましたが、こちらも擬似要素（before after）に指定しています。
beforeに赤い背景色を入れ三角にして、afterに”NEW!”という文字を入れrotate(-45deg)で斜めにしています。