html直角梯形div,CSS的空心三角形,带边直角梯形
用户投稿 学习笔记 10阅读
题目，关键是右边三角形
两种获得三角形的方法
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
.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;
}