谢谢各位答主的答案，参考了下，然后去学习了下css3属性box-shadow和border-image，自己写的一个demo
登录页demo
1. 背景
div铺满整个屏幕，再给div添加背景图片以达到效果
.bg-div{
background: url('/img/bg2.jpg') center;
}
2. 头像
添加css样式，border-radius: 50%;
3. 边框
3.1 半三角：伪元素::after
一个div，顺时针旋转45度，三角的两边是div的上、左边框，after伪元素特性置于div的下方，不会遮挡住主体的div
.box::after {
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -21px;
border-top-left-radius: 4px;
border-left: 2px solid rgba(255,255,255, 0.3);
border-top: 2px solid rgba(255,255,255, 0.3);
transform: rotate(45deg); /*旋转45度*/*
box-shadow: inset 1px 0 0 rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
3.2 上边框：伪元素::before
伪元素before是一个400px*2px容器，分开的两边边框通过设置容器的box-shadow，左右内阴影
.box::before {
content: '';
display: block;
width: 400px;
height: 2px;
position: absolute;
border-top-left-radius: 4px;
box-shadow: inset 171px 0 0 0 rgba(255,255,255, 0.2), inset -171px 0 0 0 rgba(255,255,255, 0.2); /*通过内阴影实现边框效果*/
}
3.3 其余边框：border
.box{
border: 2px solid rgba(255,255,255, 0.2); /*增加半透明边框*/
border-top: 0; /*去掉上边框*/
}
4. 透明输入框
背景透明，边框半透明，添加内外渐变阴影
.form-input{
background: transparent; /*背景透明*/
border: 2px solid rgba(255,255,255,0.3); /*边框半透明*/
box-shadow: inset 0 0 4px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.2); /*内外渐变阴影*/
}
