CSS
html, body{margin: 0; padding:0}
.q {
margin:100px;
float:left;
width: 100px;
height: 55px;
background: rgb(135,224,253);
background: -moz-linear-gradient(45deg, rgb(135,224,253) 0%, rgb(83,203,241) 40%, rgb(5,171,224) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(135,224,253)), color-stop(40%,rgb(83,203,241)), color-stop(100%,rgb(5,171,224)));
background: -webkit-linear-gradient(45deg, rgb(135,224,253) 0%,rgb(83,203,241) 40%,rgb(5,171,224) 100%);
background: -o-linear-gradient(45deg, rgb(135,224,253) 0%,rgb(83,203,241) 40%,rgb(5,171,224) 100%);
background: -ms-linear-gradient(45deg, rgb(135,224,253) 0%,rgb(83,203,241) 40%,rgb(5,171,224) 100%);
background: linear-gradient(45deg, rgb(135,224,253) 0%,rgb(83,203,241) 40%,rgb(5,171,224) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=1 );
position: relative;
}
.q:before {
content: "";
position: absolute;
top: 0px;
left: 0;
width: 0;
height: 0;
border-top: 25px solid #fff;
border-right: 25px solid transparent;
}
.q:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-bottom: 25px solid #fff;
}
.qq {
width:40px;
height:45px;
background:#FFF;
margin: 5px 30px 5px 30px;
position:relative;
}
.qq:before {
content: "";
position: absolute;
top: 0px;
left: -25px;
width: 0;
height: 0;
border-bottom: 20px solid #fff;
border-right: 25px solid #fff;
border-top: 25px solid transparent;
}
.qq:after {
content: "";
position: absolute;
bottom: 0;
right: -25px;
width: 0;
height: 0;
border-bottom: 25px solid transparent;
border-left: 25px solid #fff;
border-top: 20px solid #fff;
}