Triangle using pseudo element

by Matthew Day

HTML

<div class="mask-test">
    <div class="mask"></div>
    <img class="pic" src="http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg" />
</div>
<div class="text-area">
    <p>This is a test of the emergency broadcast system.</p>
</div>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: 100;
    line-height: 1.5em;
    color: black;
}

.mask-test {
    position: relative;
    width: 400px;
    height: 100px;
    background: rgba(90,90,90,1);
}

.mask {
    position: absolute;
    top: 44px;
    left: 88px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-right: 12px solid rgba(90,90,90,1);
	border-bottom: 6px solid transparent;
    z-index: 4;
}

.pic {
    width: 100px;
    height: inherit;
    z-index: 3;
}

.text-area {
    width: 100%;
    position: relative;
}