:after疑似要素を使い、CSSだけで、よくある名札型の矢印（上、右、下、左方向）を作成します。三角形部分の作り方は、「画像を使わず、矢印として三角形を使う場合のtips」と同じです。

サンプルのhtmlソース

    <div class="box">テ<br>ス<br>ト</div>
    <div class="box2">テスト</div>
    <div class="box3">テ<br>ス<br>ト</div>
    <div class="box4">テスト</div>

サンプルのCSSソース

.box,.box2,.box3,.box4 {
	box-sizing: border-box;
	padding: 10px;
	background: #59f;
	width: 50px;
	height: 100px;
	text-align: center;
	margin: 0px auto;
	position: relative;
	}
.box2,.box4 {
	width: 100px;
	height: 50px;
	padding: 16px 0 6px 0;
	}
.box3 {
	padding: 20px 0 0 0;
	}
.box:after,.box2:after,
.box3:after,.box4:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	}
.box:after {
	bottom: 100%;
	left: 0;
	border-width: 0 25px 25px 25px;
	border-color: transparent transparent #59f transparent;
	}
.box2:after {
	top: 0;
	left: 100%;
	border-width: 25px 0 25px 25px;
	border-color: transparent transparent transparent #59f;
	}
.box3:after {
	top: 100%;
	left: 0;
	border-width: 25px 25px 0 25px;
	border-color: #59f transparent transparent transparent;
	}
.box4:after {
	top: 0;
	right: 100%;
	border-width: 25px 25px 25px 0;
	border-color: transparent #59f transparent transparent;
	}