Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS jQuery Basics (2014) Creating a Password Confirmation Form Preparation

Lauren Stuckey
Lauren Stuckey
12,428 Points
Posted by Lauren Stuckey
Lauren Stuckey
12,428 Points

In these project files, how are the arrow shapes that display on the left side of the spans created?

I am trying to create a similar effect on a separate project that I'm working on, and was thinking I would have to use background images to get the desired shape. But I see that in these files, the rectangular shape with an arrow is somehow created in the CSS... I just can't figure out how or where it is being done.

Lauren Stuckey
Lauren Stuckey
12,428 Points
Lauren Stuckey
Lauren Stuckey
12,428 Points

Sorry, I should have added the code within the question to make it a bit easier. The project files can be found by launching the workspace to jQuery basics, project 5, but I'll post them here as well.

Here's the markup:

<body>

    <form action="#" method="post">
        <p>
            <label for="username">Username</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password">
            <span>Enter a password longer than 8 characters</span>
        </p>
        <p>
            <label for="confirm_password">Confirm Password</label>
            <input id="confirm_password" name="confirm_password" type="password">
            <span>Please confirm your password</span>
        </p>
        <p>
            <input type="submit" value="SUBMIT">
        </p>
    </form>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>

And the styles:

label {
  display: block;
  font-size: 1.6em;
  margin: 0 0 .5em;
  color: #333;
}
input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  outline: none
}
input[type="text"],
input[type="password"] {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1.6em;
  padding: .8em .5em;
  border-radius: 5px;
}
input[type="text"]:focus,
input[type="password"]:focus {
  background: #fff
}
span {
  border-radius: 5px;
  display: block;
  font-size: 1.3em;
  text-align: center;
  position: absolute;
  background: #2F558E;
  left: 105%;
  top: 25px;
  width: 160px;
  padding: 7px 10px;
  color: #fff;
}
span:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #2F558E;
  border-width: 8px;
  margin-top: -8px;
}
input[type="submit"] {
  background: #2F558E;
  box-shadow: 0 3px 0 0 #1D3C6A;
  border-radius: 5px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 2em;
  line-height: 1.6em;
  margin: 2em 0 0;
  outline: none;
  padding: .8em 0;
  text-shadow: 0 1px #68B25B;

}

3 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Lauren,

The Triangle is being created here - span:after

It's done through the border property. You can see more examples here

Lauren Stuckey
Lauren Stuckey
12,428 Points
Lauren Stuckey
Lauren Stuckey
12,428 Points

Great, that makes perfect sense. I had a feeling it had something to do with span:after but couldn't figure out what was going on. Thanks for the CSS Tricks link - very helpful!

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

If you have to create triangles with CSS, this site might help you. https://css-tricks.com/snippets/css/css-triangle/

Zeljko Porobija
Zeljko Porobija
11,491 Points
Zeljko Porobija
Zeljko Porobija
11,491 Points

For the future, just play a little with CSS code. For example, comment out some lines or change the values and see what happens. This is how you truly learn CSS and coding in general.