css-shapes

I was trying to create triangles in CSS for a responsive site today and couldn't find a good example on stackoverflow, so here's how I did it. Making angular shapes responsive is a little tricky because you can't use percentages as border values in your CSS, so I wrote a couple functions to calculate the page width and resize a triangle accordingly. The first calculates the size on loading the page, the second recalculates the size as the page width changes. CSS: .triangle { width: 0; height: 0; border-top: 50px solid rgba(255, 255, 0, 1); border-right: 100px solid transparent; } HTML: <div

Maybe there's not a way, but I'm looking to create 3 circles that would appear to overlap, yet would be actually individual objects with pure css. I can easily create a crescent moon shape, but I also need this object to only be reactive to the actual colored object, not the border as well. I need to make something like this: And to show you more of what I mean, each object needs to be it's own shape like this: Really prefer css if possible. SVG could be another way, but again, I need each object to react to the visible object on hover/click and NOT outside it's visible area. vals Making the

I'm trying to make a navigation-div with 4 buttons, one to go left, one to go right, another one to go down and yet another one to go up. Plus there needs to be an OK-button in the middle. The buttons need to be positions that they form any (the size is not set) rectangle, inside the buttons are positions on the very right, left, top and bottom, and each of them are trapezoids, leaving a square in the middle for the OK-Button. Just like that: What I've done is, that I created a trapezoid parent, with position relative shape using css: .trapezoid_parent { position: relative; } And a trapezoid

My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I'd like to have a curved outer corner where the <li> and the <div> meet. Some people call this a negative border radius or an inverted corner . See the white arrow in the image below. To extend the blue <li> to the edge of the <ul> , I'm planning to do something like this: li { right-margin: 2em; border-radius: 8px; } li.active { right-margin: 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } Is there a better way to extend the <li> to the edge of the <ul> ? Obviously, I'll

I have a triangle ( JSFiddle ) using this CSS: .triangle { width: 0; height: 0; border-top: 0; border-bottom: 30px solid #666699; border-left: 20px solid transparent; border-right: 20px solid transparent; } And this HTML: <div class="triangle"></div> This makes a triangle, but the diagonal lines are jagged and pixelated. How can I make them smooth? (I was able to smooth them out in Safari and Chrome by making them dotted, but that broke the triangles in Firefox and IE.) Even in pure CSS we can get the smooth diagonals. .triangle { width: 0; height: 0; border-top: 0; border-bottom: 30px solid

It should just basically be an outline of the square or circle - that I can style accordingly (i.e. change the color to whatever I want, change the thickness of the border, etc.) I would like to apply that circle or square over something else (like an image or something) and the middle part should be hollowed out, so you can see the image beneath the square or circle. I would prefer for it to be mainly CSS + HTML. Try This div.circle { -moz-border-radius: 50px/50px; -webkit-border-radius: 50px 50px; border-radius: 50px/50px; border: solid 21px #f00; width: 50px; height: 50px; } div.square {

I am trying to create a diagonal line on a webpage, to act as a section/section break. This is essentially a split colour section. I cant use an image as if the page gets enlarged, the image is going to pixelate. So i need to be able to draw a diagonal line directly at the bottom of the div, like the image below. I have tried using a border, however i cannot get the actual break to be in the middle, rather than the right or left hand side. Is there a way to draw diagonal lines in CSS? As you can see, i need to create a div that is 90px high and have the split/diagonal line in that div. I can

I'm looking to create this overlapping circles shape in CSS: Basically, just stacked circles. I've looked around, and all solutions I see include using multiple div elements for this effect. However, can't this be done with a single div, using CSS3? I looked at how it could be easily done, and figured that, if all colours are the same, you'd have a pill shape like this: http://jsfiddle.net/5wytm0r4/ #circles { background-color: red; width: 130px; height: 100px; border-radius: 50px; } <div id="circles"></div> And then simply draw a couple of quarter moons in it, and you're done. However, I can