SOURCE

<div id="triangle"></div>
<br/>
<br/>
<div id="glass">
    <div class="connent">
        <p>"少年贪玩，青年迷恋爱情，壮年汲汲于成名成家，暮年自安于自欺欺人。人寿几何，顽铁能炼成的精金，能有多少？但不同程度的锻炼，必有不同程度的成绩；不同程度的纵欲放肆，必积下不同程度的顽劣。 </p>
        <footer>——
            <cite>杨绛</cite>
        </footer>
    </div>
</div>

/*三角形实现： 设置三个方向的border,其中两个对立的为透明 */
#triangle{
    width: 0px;
    height: 0px; 
    border-top: 100px salmon solid;
    border-right: 100px transparent solid;
    border-left:100px transparent solid;
}
/* 毛玻璃实现，设置元素浮动，背景通过rgba设置颜色和透明度 */
#glass{
    position: relative;
    width: 400px;
    height: 400px;
    background: fixed  url("https://tse1-mm.cn.bing.net/th/id/OET.95fc97a976314d408f94420a14643a19?w=272&h=272&c=7&rs=1&o=5&pid=1.9") ;
}
.connent{
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; 
    right: 0;
    width: 400px;
    height: 200px;
    line-height: 2;
    margin: auto;
    border-radius: 5px;
    background: rgba(255, 255, 255,0.4);
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
}