向下指向div的箭头

时间：2014-09-17 21:32:02

标签： html css forms login

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

login form bottom

到目前为止，我有这个：

我的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>

3 个答案:

答案 0 :(得分：0)

Here's your change in an updated CodePen.

这就是我们所做的：

<强> CSS 

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

#login-form:after {
  position: absolute;
  content: ' ';
  transform: rotate(45deg) translate(-50%, -5px);
  height:30px;
  width:30px;
  top: 100%;
  left: 50%;
  background-color: white;
  border-color: #ea6e10;
  border-width: 1px;
  border-style: solid;
  border-top: none;
  border-left: none;
  pointer-events: none;
}

我们允许通过将after设置为#login-form来正确定位伪元素position:relative。然而，重要的部分是#login-form:after部分。我们正在创建一个存在于普通文档对象模型之外的伪元素，以提供样式元素。我们接受它，将其定义为30px x 30px框，给它一个白色背景和一个橙色边框，并将它轻轻地放在父元素#login-form的底部中间。然后，我们使用变换将其旋转45度并将其向上移动5个像素以符合父元素的下边框。

这不适用于IE 9及以下

我们需要为IE 9及以下的边框做一些聪明的事情。以下是该场景的变化：

<强> CSS 

#login-form {
    position: relative;
}
#login-form:before, #login-form:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: ' ';
}
#login-form:before {
    border-top: solid 15px white;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
    margin-left: -15px;
}
#login-form:after {
    border-top: solid 17px #ea6e10;
    border-left: solid 17px transparent;
    border-right: solid 17px transparent;
    margin-left: -17px;
}

答案 1 :(得分：0)

像这样更改你的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

答案 2 :(得分：0)

您可以使用this是一个气泡生成器：

.bubble {
    position: relative;
    width: 250px;
    padding: 0px;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: #ea6e10 solid 2px;
}
.bubble:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -15px;
    left: 136px;
}
.bubble:before {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 16px 16px 0;
    border-color: #ea6e10 transparent;
    display: block;
    width: 0;
    z-index: 0;
    bottom: -17px;
    left: 135px;
}

在容器元素中应用此类。在你的情况下：

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

fiddle

相关问题
最新问题