html - div 中向下的箭头

Question

我不知道如何提出这个问题，但这是我想做的。我做了一个登录表单。我希望登录表单的底部看起来像这样

到目前为止我有这个:

我的CSS:

/*****  Login  *******/
fieldset {
    border: none;
    margin: 0;
}

input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    -webkit-appearance: none;
}

input:focus {
  outline: none;
}

input[type="submit"] { cursor: pointer; }

/* ---------- LOGIN-FORM ---------- */

#login-form {
    margin: 10px;
    width: 300px;
    border: 1px solid #ea6e10;
    vertical-align: middle;
}

#login-form h3 {
    background-color:#ea6e10;
    color: #fff;
    font-size: 14px;
    margin-top: 0;
    padding: 20px;
    text-align: right;
    }

#login-form fieldset {
    background: #fff;
     border: 1px #ea6e10;
    padding: 20px;
    position: relative;
}


#login-form input {
    font-size: 14px;
}

#login-form input[type="username"],
#login-form input[type="password"] {
    background: #dcdcdc;
    padding: 12px 10px;
    width: 238px;
  margin-top: 5px;
}

#login-form input[type="username"] {

}

#login-form input[type="password"] {
    border-radius: 0px 0px 3px 3px;
}

#login-form input[type="submit"] {
    background: #ea6e10;
text-align: center;
    color: #fff;
    float: left;
    font-weight: bold;
    margin-top: 5px;
    padding: 12px 20px;
    width: 100%;
}

#login-form input[type="submit"]:hover { 
  background: #ea6e10; 
}

/*****  Login  *******/
fieldset {
	border: none;
	margin: 0;
}

input {
	border: none;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	-webkit-appearance: none;
}

input:focus {
  outline: none;
}

input[type="submit"] { cursor: pointer; }

/* ---------- LOGIN-FORM ---------- */

#login-form {
	margin: 10px;
	width: 300px;
    border: 1px solid #ea6e10;
    vertical-align: middle;
}

#login-form h3 {
	background-color:#ea6e10;
	color: #fff;
	font-size: 14px;
    margin-top: 0;
	padding: 20px;
	text-align: right;
	}

#login-form fieldset {
	background: #fff;
	 border: 1px #ea6e10;
	padding: 20px;
	position: relative;
}


#login-form input {
	font-size: 14px;
}

#login-form input[type="username"],
#login-form input[type="password"] {
	background: #dcdcdc;
	padding: 12px 10px;
	width: 238px;
  margin-top: 5px;
}

#login-form input[type="username"] {

}

#login-form input[type="password"] {
	border-radius: 0px 0px 3px 3px;
}

#login-form input[type="submit"] {
	background: #ea6e10;
text-align: center;
	color: #fff;
	float: left;
	font-weight: bold;
	margin-top: 5px;
	padding: 12px 20px;
    width: 100%;
}

#login-form input[type="submit"]:hover { 
  background: #ea6e10; 
}

<div id="login-form" style="float:left;">

        <h3>Login</h3>

        <fieldset>

                <input type="username" required value="username" onBlur="if(this.value=='')this.value='username'" onFocus="if(this.value=='username')this.value='' "> <!-- JS because of IE support; better: placeholder="username" -->

                <input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "> <!-- JS because of IE support; better: placeholder="Password" -->
 <p><a href="#">Forgot Password?</a></p>
                <input type="submit" value="Login">

              

            </form>

        </fieldset>

    </div>

Answer 1

像这样更改您的 CSS:

/*****  Login  *******/
 fieldset {
    border: none;
    margin: 0;
}
input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    -webkit-appearance: none;
}
input:focus {
    outline: none;
}
input[type="submit"] {
    cursor: pointer;
}
/* ---------- LOGIN-FORM ---------- */
 #login-form {
    margin: 10px;
    width: 300px;
    vertical-align: middle;
    position: relative;
    background: #f9f9f9;
    border: 1px solid #ea6e10;
}
#login-form:after, #login-form:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
#login-form:after {
    border-color: rgba(249, 249, 249, 0);
    border-top-color: #f9f9f9;
    border-width: 15px;
    margin-left: -15px;
}
#login-form:before {
    border-color: rgba(255, 102, 0, 0);
    border-top-color: #ea6e10;
    border-width: 16px;
    margin-left: -16px;
}
#login-form h3 {
    background-color:#ea6e10;
    color: #fff;
    font-size: 14px;
    margin-top: 0;
    padding: 20px;
    text-align: right;
}
#login-form fieldset {
    background: #fff;
    border: 1px #ea6e10;
    padding: 20px;
    position: relative;
}
#login-form input {
    font-size: 14px;
}
#login-form input[type="username"], #login-form input[type="password"] {
    background: #dcdcdc;
    padding: 12px 10px;
    width: 238px;
    margin-top: 5px;
}
#login-form input[type="username"] {
}
#login-form input[type="password"] {
    border-radius: 0px 0px 3px 3px;
}
#login-form input[type="submit"] {
    background: #ea6e10;
    text-align: center;
    color: #fff;
    float: left;
    font-weight: bold;
    margin-top: 5px;
    padding: 12px 20px;
    width: 100%;
}
#login-form input[type="submit"]:hover {
    background: #ea6e10;
}

See forked CodePen