如何利用伪元素制造带三角的div

CSS 样式如下:

.div{
    display: block;
    position: absolute;
    z-index: 1001;
    width: 270px;
    min-width: 250px;
    height:auto !important;
    right: 20px;
    -webkit-box-shadow: 0px 0px 10px #333;
    border: none;
    padding: 10px 10px 15px 20px;
    background: #fff;
}

.div:after{
    position: absolute;
    top: -6px;
    left: 80%;
    content: '';
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ccc;
}

效果：