思路：一个矩形，一个正方形，将正方形的边框去掉两边，留两边，这样就形成了一个打开的三角形，然后旋转打开的三角形，利用相对定位移动到矩形右侧，接着将正方形的背景颜色设置白色，覆盖矩形右侧边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<style>
body>div{
width: 300px
height: 200px
border: 1px solid red
padding: 10px
}
/* 矩形 */
#rectangle {
width: 80px
height: 20px
border: 1px solid #CEEBD4
float: left
padding: 5px 0 5px 10px
color: #808280
}
/* 三角形 */
#triangle {
width: 15px
height: 15px
border-left: 1px solid #CEEBD4
border-bottom: 1px solid #CEEBD4
float: left
position: relative
left: -8px
top: 8px
background-color: white
/* 旋转 */
-webkit-transform: rotate(-135deg)
}
</style>
</head>
<body style="padding:100px">
<div>
<div id="rectangle">扫码登录</div>
<div id="triangle"></div>
</div>
</body>
</html>
打开浏览器，访问该文件，效果如下图：
首先，把宽和高设为同样的固定值，则肯定是正方形，这个不用多说；
其次，如果是自适应的界面，需要用百分比来设置正方形的边长，则可以用css3的新增长度单位vw、vh来设置，1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。比如下面这个正方形的边长是屏幕宽度的50%：
<div style="width:50vw height:50vw background-color:#888"></div>
但是，这个方法要求浏览器支持css3，一些老的浏览器可能就不支持了。
设置矩形边框 ：border : 1px solid #000000添加文字：
<ul>
<li>九寨沟</li>
<li>黄山风景区</li>
。。。。。
。。。。。
。。。。。
</ul>
根据实际写N对li即可
希望可以帮到你～
