css-shapes

I am working on a website on which we have use parallax effect. In that there are some images which are triangle shaped, like this & the image is transparent because it overlaps the above DIV. I am trying so many things with css. but didn't get the desired result. I achieve that desired result with fixed width. Check this http://jsfiddle.net/eJ7Sf/2/ but does not work with fluid width. Check what i still try but didn't work http://jsfiddle.net/ceGGN/3/ http://jsfiddle.net/eJ7Sf/1/ NOTE: i know about css3 MASK property but it's not work in firefox previous browsers. I want the capability till

With the CSS border-radius property I can have a curvy, rounded border corner at the end. .boxLeft{ border-right: 1px dashed #333; border-bottom: 1px dashed #333; border-radius: 0 0 10px 0; } .boxRight{ border-left: 1px dashed #333; border-bottom: 1px dashed #333; border-radius: 0 0 0 10px; } But I want a border corner like the image below. If I have two boxes (Yellow & Pink) meeting each other and I want a harsh corner at the bottom meeting point (dotted corner), what should I do? Is that possible using CSS? thordarson Here's a way, although it does have some shortcomings, like no borders and

I'm wondering is there any possibility to build div with irregular shapes, something, similar to this (e.g. Greenland, Europe, Africa). I want to create map like here with using CSS3 and HTML5. Here is link to an example image: Navaneeth Elements have always been rectangular. Still, you can simulate other shapes by drawing CSS shapes within the rectangular division and by arranging different divisions (with z-index, etc.). This will help you: http://css-tricks.com/examples/ShapesOfCSS/ What you have there looks like a grid, which you can obtain either with many gradients on a div, either with

I need to create a DIV where width=height , and height=100% of the viewport (which, obviously, is variable). In other words, a perfectly square DIV that calculates it's dimensions based on the height of the viewport . Elements within that DIV will take their dimensions as percentages of the parent-DIV's height & width. It seems to me like this should be simple to do in CSS , but I've gotten stuck with it! Any pointers would be much appreciated. You can do this with jquery (or pure javascript if you prefer). With jquery: <div id="square"> </div> $(document).ready(function(){ var height = $

I have a shape with an edge like this in Photoshop: Is it possible to make the repeated triangles as a border with CSS? extramaster You can use css3 gradients to create a zig-zag patterned background, use the after css pseudo to apply it like a border. .header{ color: white; background-color: #2B3A48; text-align: center; } .header:after { content: " "; display: block; position: relative; top: 0px; left: 0px; width: 100%; height: 36px; background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220

I am trying to have a triangle/arrow at the bottom of my hero but it is not responsive and doesn't work on mobile very well as the triangle floats off to the right and is not absolutely centered anymore. How could I keep the triangle positioned in the absolute center at the bottom of the div at all times? Example code here: http://jsfiddle.net/SxKr5/1/ HTML: <div class="hero"></div> CSS: .hero { position:relative; background-color:#e15915; height:320px !important; width:100% !important; } .hero:after, .hero:after { z-index: -1; position: absolute; top: 98.1%; left: 70%; margin-left: -25%;