We Keep Coding

Is there a way to make a triangular, clickable box in html/css?

Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this:
Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??

CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.
See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/
A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/
This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.

I found this site, maybe it will help:
CSS Triangle Generator
I think you can align different triangles with position: absolute too.

is there a way to set a certain screen zoom level? its messing my site up

my site looks fine untill people start zooming in and out and after hours of work on it and messing with its css I am clueless on how to fix this zoom problem. Should I somehow fix the zoom to a certain level? if so, how can I do it? I tried fixing this zoom issue but putting everything into a table but that isnt really working so I dont know what to do..help..
This is how it looks on safari, its fixed if i adjust my zoom level but initially looks like this:
Then on firefox and chrome looks perfect:

The zoom level of the browser is something that is strictly the domain of the user - it is bad practice to interfere with user-level choices such as page zoom, and usually you are technically unable to do so anyway. A user will zoom a webpage because they wanted to enlarge it, the reasons are their own and an individual site should not (and can not) interfere with that choice.
Instead of fighting the user, you should seek to design your site in such a way so as to make the content the most important thing. You should craft your design in such a way so that when a user zooms (or makes other changes like disabling CSS or Javascript), the content (presumably the point of having a website at all) is the focus.
Using percentages for your layout, using em for font sizes, and other such techniques will increase the accessibility of your site. See articles like http://24ways.org/2007/css-for-accessibility or http://www.w3.org/TR/WCAG10-CSS-TECHS/ for information on using accessible web design techniques.
EDIT
The screenshots demonstrate one of the many pitfalls in trying to prevent accessibility support - different browsers implement zoom in different ways. Some only increase the font size, some enlarge the images, it is not consistent. The trick is to make it not matter, not to prevent it from happening.

Here's an IE fix
http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm
.css
{
zoom: 1
}

Short answer: No, You cannot modify the end user's browser setting for zoom level.
Maybe you should look into CSS patterns for designing sites that zoom nicely. For example I beleive em's zoom better than point based font sizes. etc
take a look at articles like these: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
Also, if you post specific problems we may be able to help solve them on a one off basis

Dynamic images sorting and cropping similar to google+ album view

can someone help me find a solution to achieve the same result as the google plus album view ?
The thumbnails listing manages to keep a consistent row width by re-sorting AND cropping images so they fit all the time, and re-arranges them according to window size.
I know about masonry but it tends to create a lot of white space when images don't have the same size... (because it does not handles cropping)
Does anybody knows about a plugin that does that? or if not the basic math behind it?

take a look at:
http://blog.vjeux.com/2012/javascript/image-layout-algorithm-google-plus.html
It explains how the layout works.
Also take a look at:
http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/
http://www.moewashere.com/jglance/
which are both implementations of the google plus album grid.

Maybe this is a bit overkill for what you are looking for.
You can use the Simulated Annealing algorithm, that is commonly used in electronics to find the optimal layout for all the tiny electronic components inside a microchip restricted area, which is basically the same problem of finding the best layout for a set of images inside a browser window.
Basically, this algorithm gives you a good solution but not guarantee to be the best.
Read carefully the Wikipedia article, as it explains better than I would do.
You can also check out this Simulated Annealing applet for the Salesman problem. Try out with a 500 temperature and watch what happens when it colds down.
Hope this helps.

What I found in google plus and may be it can help you.
They cut some images to make it fit. You easely can find it on the first image
They have lines of images with the same height
So it is ease to do that. You can adjust images to the same height by scaling at first and in each line you can cut the widest a little bit to adjust the width of line.
O, by the way, If you will strach chrome window with google+ service it will not look as good as it was, some gaps will apear for some lines

Designing a matrix webpage

I am looking forward to designing a web page with a matrix layout. like #. It would have max. 8 columns and 3 rows.
I have decided on 8 columns as every screen width resolution on PC, mobile, tablets divides perfectly by 8. I have decided on 3 rows as it is readable. Though vertical scroll bar shows automatically, asking a visitor to click it to see the content is a pain to him. So, visitor needs to see complete paragraphs/sections the first he sees the page.
When I left coding for web (as I started managing my team members. I hardly used to program until some time back and seem to lost out a lot.) when CSS/js was just coming out. Now it dominates even the HTML. So, using CSS is the way to go. (Imho, I actually find coding CSS a scary job).
Looks to be a huge requirement, after I have searched for the resources online.
Problems:
* Fixed columns over different resolutions
* Fixed rows
* Placing right content in right matrix boxes.
How do I start?
Update: I am a huge fan of http://www.nytimes.com/chrome. The main screen which shows assorted news in a matrix is a wonderful and unique design. The matrix changes dynamically to respond to changing screen resolution.
How can we design it?

Probably, first, you forget about non-standard grid of 8x3. Then, you
Check the demo;
Download 960 grid system;
Read tutorial with the video;
start using that grid. Will be much easier to maintain it in the future

You may care about this.
If not, just make <ul> and <table> forms.

How to split page and reveal stuff underneath?

I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!

Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu

here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.

Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column

Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/

This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.

I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)