先看一下效果：
image.png
思路是把2个border设置宽度，2个不设置，然后使用2D旋转45度！
直接上代码！
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 300px;
height:300px;
background-color: #f00;
margin: 100px auto;
}
div:after{
margin:auto;
content: "";
//不能少
display: block;
width: 20px;
height: 20px;
background-color: transparent;
/*先设置底部，右边边框，然后顺时针旋转45度*/
border-width: 0 2px 2px 0;
border-style: solid;
border-color: #000;
transform:rotate(45deg);
}
<div>
</style>
</head>
<body>
<div></div>
</body>
</html>
