html - 请教，下图登录页如何用css实现？半透明的边框怎么做？

Question

Answer 1

I gave it a try

demo

Answer 2

Thank you for your answers. I took it as a reference and then learned about the css3 properties box-shadow and border-image, and wrote a demo myself
Login page demo

1. Background

p covers the entire screen, and then add a background image to p to achieve the effect

.bg-p{
    background: url('/img/bg2.jpg') center;
} 

2. Avatar

<img class="user-avater" src="/img/user-4.png"/>

Add css style, border-radius: 50%;

3. Border

3.1 Semi-Triangle: Pseudo-Element::after

A p, rotated 45 degrees clockwise. The two sides of the triangle are the top and left borders of p. The after pseudo-element attribute is placed below the p and will not block the main p

.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 Top border: pseudo-element::before

The pseudo element before is a 400px*2px container. The separated borders on both sides are set by setting the box-shadow of the container and the left and right inner shadows

.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 Other borders: border

.box{
    border: 2px solid rgba(255,255,255, 0.2); /*增加半透明边框*/
    border-top: 0; /*去掉上边框*/
}

4. Transparent input box

The background is transparent, the border is semi-transparent, and inner and outer gradient shadows are added

.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);  /*内外渐变阴影*/
}

Answer 3

If this is only compatible with modern browsers, you can almost make it using border-image or gradient in CSS3. If it is compatible with IE8, just cut the image directly

Answer 4

It is recommended to use background images for ie8 and below. For box-shadow and above, use rgba to set the border color and transparency. Input box background rgba sets the background color and transparency. ie-css3.htc can also make lower versions of ie support box-shadow, radius and other attributes. ps The entire login box actually has a background color, it’s just very light but there is