Arrow pointing downwards in div - html

Question

I don't know how to put this question but here's what I wanna do. I have made a login form. I want the bottom of my login form to look something like this
So far I have this:
My 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>Forgot Password?</p>
<input type="submit" value="Login">
</form>
</fieldset>
</div>

Answer 1

Change your CSS like this:
/***** 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

Answer 2

You can use this is a bubble generator:
.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;
}
And apply this class in your container element. In your case:
<div id="login-form" class="bubble" style="float:left;">
fiddle

Answer 3

Here's your change in an updated CodePen.
And here's what we did:
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;
}
We allow the pseudo-element after to be appropriately positioned by setting the #login-form to position:relative. The important part of this is the #login-form:after part, though. We're creating a pseudo-element that exists outside the normal document object model to provide the stylistic element. We take this, define it as a 30px x 30px box, give it a white background and an orange border, and put it smack dab in the bottom middle of your parent element #login-form. Then, we use transforms to rotate it 45 degrees and scoot it up 5 pixels to meet the bottom border of your parent element.
This will not work in IE 9 and below
We need to do some clever things with borders for IE 9 and under. Here's the change for that scenario:
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;
}