Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to make the CSS width property go from bottom to top

How to make the CSS width property go from bottom to top

Problem

I'm making a web app for Google Chrome (so no need for cross browser support) and I'm making an animated tutorial that will run when it first boots. I'm drawing a box on the screen by having four different div elements with -webkit-transistions for width and height properties respectively. Then I'm using javascript to add classes to these borders and make them draw on the screen. It was all working fine until I got to the border on the right-hand side. I want my borders to draw like this: left goes down, bottom goes right, right goes up and then top goes left. It all worked properly until I got to the right border. It draws from top to bottom instead of bottom to top. I tried rotating it with -webkit-transform:rotate(180deg) but that didn't really help. Here's the code:



Tutorial - Inscribe
Problem courtesy of: Toastrackenigma

Solution

The issue lies with your initial position of the top and right divs. If you make the following changes to your right and top classes, I think you will achieve your desired effect.

.right change top:10px; to bottom:10px;

.top change left:13px; to right:13px;

Solution courtesy of: mbrightenfield

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to make the CSS width property go from bottom to top

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×