We Keep Coding

how to hide an accordion pane in javascript

hello I have been looking for a good accordion for a long time.
I finally found a model that I like.
The only small concern is that I would like when I open my page with the accordion
Let the first part be hidden like the two below
when the page loads
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function() {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

Change the line
$("#faq_slide .answer").not(":first").hide()
to:
$("#faq_slide .answer").hide()
$("#faq_slide .answer").hide();
$("#faq_slide .question").click(function() {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

Just Remove the .not(":first") from $("#faq_slide .answer").not(":first").hide(); because that part selects all the elements except the first.
$("#faq_slide .answer").hide();
$("#faq_slide .question").click(function() {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

Do you mean all of them should be closed initially?
Remove the .not(":first") from the first line.
$("#faq_slide .answer").hide()
$("#faq_slide .answer").hide();
$("#faq_slide .question").click(function() {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

How to add an icon to an accordion menu

I've implemented an accordion that works fine, but I tried to add a + to it to open the shutter and a - to close it when it is unfolded.
I could not find a way to do so.
Here is my code:
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function() {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap");
body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

You can add Span tag inside your question div and give it an absolute position and change its text content depending on your click event
Here is an example how to do that:
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function() {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
$(this).find('span').text('+');
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
// Add - when its open and + for other Siblings
$(this).find('span').text('-');
$(this).siblings().find('span').text('+');
}
});
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap");
body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
position: relative;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
.symbol {
position: absolute;
/* Top Right Bottom Left */
inset: auto 1rem auto auto;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<div id="faq_slide">
<div class="question">First Question<span class="symbol">-</span></div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question<span class="symbol">+</span></div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question.<span class="symbol">+</span></div>
<div class="answer">Lorem ipsum dolor sit amet</div>
</div>

you may add a toggle class 'active' for the element with class 'question' and add pseudo-element style :before content: "+" not-active and "-" for active class
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question:first-child").addClass('active');
$("#faq_slide .question").click(function() {
$(this).siblings('.question').removeClass('active')
$(this).toggleClass('active');
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap");
body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
position: relative;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
.question::after{
content: '+';
display:inline-block;
width: 15px;
height: 15px;
position: absolute;
right: 10px;
transition: all 0.5s ease;
}
.question.active::after{
content: '-';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

How can I display my slider correctly

everyone i'm new to html/css..I want to display my slider in the center. Can anyone check what wrong in my code & why my Info div come right there where I want display my Slider....Thanks in advance.
Here is HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mystyle.css">
<title>GR PROVIDER</title>
</head>
<body>
<div class="Header">
<div class="heading">
<h2> Gulf Resources Provider </h2>
</div>
<div class="socialmedia">
<ul>
<li> <img src="GRProvider/Facebook.jpg">
</li>
<li> <img src="GRProvider/LinkedIn.jpg">
</li>
<li> <img src="GRProvider/Google.jpg">
</li>
<li> <img src="GRProvider/Twitter.jpg">
</li>
</ul>
</div>
</div>
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg" />
</div>
</div>
<div class="diagram">
<div class="sample">
<img src="GRProvider/Img_3.jpg" />
</div>
<div class="sample">
<img src="GRProvider/Img_4.jpg" />
</div>
</div>
<div class="main_content">
<div class="navigation">
<ul>
<li> HOME
</li>
<li> ABOUT US
</li>
<li> CAREER
</li>
<li> CONTACT US
</li>
</ul>
</div>
<div class="Slider">
<div class="slider_img">
<img src="GRProvider/Slider.jpg">
</div>
</div>
</div>
<div class="Info">
<div class="About_Us">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting indutry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummytextoftheprintingandtypesettingindustry.LoremIpsum.............</p>
</div>
<div class="button">
<button type="button">READ MORE</button>
</div>
</div>
<div class="content">
<div class="text">
<img src="GRProvider/Img_4.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
<div class="text">
<img src="GRProvider/Img_5.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
<div class="text">
<img src="GRProvider/Img_6.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
</div>
<div class="footer">
<h3> Copyright by Bitsprovider.com </h3>
</div>
</div>
</body>
</html>
Here is stylesheet attached.
* {
margin: 0% auto;
padding: 0;
width: 90%;
}
body {
background-color: #1e93a5;
width: 100%;
}
.header {
margin: 2%;
width: 100%;
}
.heading {
float: left;
width: 70%;
}
h2 {
color: #fff;
padding: 0 25%;
}
.socialmedia {
float: left;
width: 30%;
}
.socialmedia > img {
}
ul {
width: 100%;
}
li {
float: left;
list-style: outside none none;
text-decoration: none;
width: 11%;
}
a {
border: 1px solid #0e8393;
color: black;
float: left;
text-align: center;
text-decoration: none;
width: 100%;
}
.images {
float: left;
width: 20%;
}
.pics img {
width: 100%;
}
.diagram {
float: right;
width: 20%;
}
.sample img {
width: 100%;
}
.main_content {
float: left;
width: 60%;
}
.navigation {
width: 100%;
}
.navigation > ul {
width: 100%;
}
.navigation > ul li {
list-style: outside none none;
text-decoration: none;
width: 25%;
}
.navigation > ul li a {
background-color: #2dacbe;
color: black;
text-align: center;
text-decoration: none;
width: 100%;
}
.slider {
width: 100%;
}
.slider_img {
width: 100%;
}
.info {
float: left;
width: 100%;
}
.About_Us {
float:left;
width: 100%;
}
p {
width: 100%;
color: #FFF;
background-color: #1e93a5;
text-align:justify;
}
.button {
}
.content {
float: left;
width: 100%;
}
.text {
float: left;
width: 33%;
}
.text > img {
border: 1px solid #18204e;
width: 93%;
}
h4 {
background-color: #263270;
color: #fff;
width: 93%;
}
.text > p {
background-color: #d3d3d3;
color: #fff;
width: 93%;
}
.footer {
float: left;
padding: 2%;
width: 100%;
}
h3 {
color: #fff;
text-align: center;
}

This will center your slider, because it's within the main_content class.
.main_content {
margin: 0 auto;
width: 100%;
clear: both;
}
Once you put the images in the slider, you will have to set that group to be centered as well, but that's controlled through whatever javascript you use for the slider. If it's just one image use .myImageClass{text-align: center}.
edit: jsfiddle

Stretching hover background to full height

I am trying to adapt a use of some jscript to make links in text change the full bleed background on a single web page, my hacked attempt is here:
http://testarama.webege.com/
My problem is with smaller screens... if you resize the window then you will notice that the hover backgrounds only fill an area the size of the initial window before scrolling down... but if you are scrolled down fully and using the bottom link then this displays the cutoff with the original background poking out (the test will explain that better than I!).
I've tried various containers and background-attach rules and can't seem to get around this... I'd really like to use this trick for a site so if anyone can shed some light on where it is going wrong that'd be great.
INDEX.HTM =
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tester</title>
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src='leaflet.js' type='text/javascript'></script>
<script src='wax.leaf.js' type='text/javascript'></script>
<link href='leaflet.css' rel='stylesheet' type='text/css' />
<script>
$( document ).ready(function() {
$('p a').each(function() {
var fig = $('<flashers class="'+ $(this).attr('rel') +'"></flashers>');
fig.appendTo('body');
});
$('p a').hover(
function() {
$('body').addClass('hover_on');
$(this).addClass('active');
$('.'+$(this).attr('rel')).addClass('on');
},
function() {
$('body').removeClass('hover_on');
$(this).removeClass('active');
$('.'+$(this).attr('rel')).removeClass('on');
}
);
});
</script>
</head>
<body>
<bound>
<div class="main_box">
<p>This is a background link <a rel="green">that turns green</a>.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is more text. Lorem ipsum dolor sit amet and so forth and so on and keep going.</p>
<p>This is another background link <a rel="green">that turns green</a>.</p>
<footer />
</div>
</bound>
</body>
</html>
STYLE.CSS:
/*** background tester ***/
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body {
height: 100%;
}
/* Main */
body {
text-align: center;
color: white;
font-family: Georgia, Garamond, Baskerville, serif;
font-size: 12pt;
font-weight: 400;
line-height: 1.5em;
margin: 0 30px;
background: url('red.jpg') center center #222;
background-size: cover;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
flashers {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
display: block;
background-position: center center;
background-size: cover;
background-attachment: fixed;
opacity: 0;
transition: 1s opacity;
-webkit-transition: 1s opacity;
}
::selection { background: rgba(255,255,255,0.7); }
/* Backgrounds */
#media only screen and (min-width: 640px) {
flashers.on { opacity: 1; }
flashers.green { background-image: url('green.jpg'); }
}
/* Content etc. */
bound {
width: 100%;
height: 100%;
max-width: 620px;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: box;
display: -webkit-box;
display: -moz-box;
box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
background: rgba(0,0,0,0.0);
text-align: left;
position: relative;
z-index: 10;
}
/* Big displays etc. */
#media only screen and (min-width: 640px) {
p a {
color: #fff;
margin: 0 3px;
line-height: 0em;
border-bottom: 1px dotted rgba(255,255,255,0.4);
}
p a:not([href]) { pointer-events: auto; }
p a:hover { opacity: 1; }
.hover_on p a[href] { color: transparent; }
.hover_on p a { color: transparent; }
.hover_on p { color: transparent; }
.hover_on p a.active { color: #fff; }
}
/* Other Fixings (some borrowed) */
#media only screen and (max-width: 767px), screen and (max-height: 680px) {
body { font-size: 16pt; }
li { line-height: 1.25em; margin-bottom: 0.6em; }
}
a {
outline: medium none !important;
}
Rest is visible at link: http://testarama.webege.com/
and also in a fiddle

The background is set on flashers element.
And this is descendant from body. So it is dimensioned to the full dimension of body.
But body height is dimensioned as 100%, so it is dimensioned according to the html dimension, that at the end is the dimension of the browser window.
But when you are scrolling, the bottom of the screen is on the bound element, that is sized according to its content, and that, in small browser sizes, has a height greater than body.
you could try to make body adapt to bound, but probably the best solution is to make flashers descendant of bound
Haven't succeeded fully, that's the best I have got :
fiddle
.main_box {
position: relative;
padding-left: 50px;
padding-right: 50px;
z-index: auto;
}
.main_box:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 110%;
z-index: -9;
opacity: 0;
transition: opacity 1s;
margin-left: -30px;
margin-right: -30px;
background-origin: border-box;
background-size: cover;
background-color: green;
background-clip: border-box;
}
.main_box.active:after {
opacity: 1;
}
.green:after {
background-image: url('http://s8.postimg.org/xj53t3d91/green.jpg');
}

CSS3 arrow box like branch.com

I really like the arrowboxes on branch.com, example: http://tinyurl.com/lw5zlhu
How does one create arrowboxes with a timeline like branch.com?
I have done this so fare: http://jsfiddle.net/uFPEf/6/
HTML
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
<div class="timeline">
<div class="line"></div>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
<div class="timeline">
<div class="line"></div>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur adipiscing dignissim purus at adipiscing.
</p>
</div>
CSS
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
font-weight: 300;
padding:20px;
}
.item{
border-radius:3px;
padding:10px;
border: solid 1px #EEEEEE;
}
.item p {
color:#333333;
padding:20px;
}
.timeline {
width: 100%;
}
.line {
background: #EEEEEE;
height: 50px;
margin: 0 auto;
width: 2px;
}

You can use CSS' before and after elements. If you target directly where you want with absolute positioning, and give a white background, you can emulate it.
.item:before {
position: absolute;
top: -11px;
left: 50px;
-webkit-transform: rotate(45deg);
height: 20px;
width: 20px;
background: #fff;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
content: '';
}
.item:after {
position: absolute;
bottom: -11px;
left: 50px;
-webkit-transform: rotate(45deg);
height: 20px;
width: 20px;
background: #fff;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
content: '';
}
http://jsfiddle.net/uFPEf/7/

Here is a pure CSS solution
it may be better to use a image though.
HTML:
<div id="box"></div>
CSS:
#box{
width:200px;
height:200px;
background:#EEE;
box-shadow: 0px 0px 2px #999;
margin:50px;
position:relative; /* This makes sure the ::after is absolute to this element */
}
#box:after{
content:''; /* Content is required on all ::before & ::after */
width:22px;
height:22px;
background:#FFF;
border-top: 1px solid #C2C1C1; /* 3D'ish effect */
border-left:1px solid #C2C1C1;
position:absolute;
bottom:-12px; /* Half the height of the square */
left:15px;
-webkit-transform: rotate(45deg); /* rotate 45deg to fake a triangle */
}
Demo