题目，关键是右边三角形
两种获得三角形的方法
1、正方形旋转45度
2、只有border的图形，一条边就是实心三角形
用到的伪类after和before做图形时，content为空，表现为block，定位为absolute。
transparent为透明。
此题最好用第二种，因为第一种不精确，以下是两种代码
#demo{
position: relative;
width: 100px;
height: 100px;
border: 2px solid #000;
}
#demo:after{
content: '';
display:inline-block;
position: absolute;
width: 14.1412px;
height: 14.1412px;
top:20px;
left:93px;
transform: rotate(45deg);
border-top: 2px solid #000;
border-right: 2px solid #000;
background-color: #fff;
}
#demo{
position: relative;
width: 100px;
height: 100px;
border: 2px solid #000;
}
#demo:after{
content: '';
position: absolute;
border: 10px solid transparent;
top:20px;
left: 100%;
border-left-color: #fff;
}
#demo:before{
content: '';
position: absolute;
border: 12px solid transparent;
top:18px;
left: 100%;
border-left-color: #000;
}
QQ图片20180428110215.png
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.abc::before{
content:"";
position:absolute;
left:0;
top:0;
width:16px;
height:16px;
box-sizing:border-box;
border-bottom:1px solid black;
transform-origin:bottom center;
transform:rotateZ(45deg) scale(1.414);
margin-top:202px;
}
</style>
</head>
<body>
<div style="position: absolute;opacity: 0.6;" >
<div style="width: 275px;height: 208px;background-color: red;border:1px solid black;border-width: 1px 1px 0 1px"></div>
<div style="border: 0px solid red; width: 0;height: 0; border-left-color: transparent;border-width: 15px 0px 0px 15px;float: left;"></div>
<div style="width:260px;height: 15px;background-color: red;float: left;border:1px solid black;border-color: transparent black black transparent;"></div>
<div class="abc"></div>
</div>
</body>
</html>
