3

For a project I am working on I need to create a grid of octagons. I can create an octagon using css the problem is that it is not responsive to the browser, in that it doesn't resize with the browser window. This is important as the website is to be viewed on multiple devices and the grid would have to be viewable on mobile devices.

The octagons are purely for display purposes so it is possible I can just use an image background but I would like to avoid that if possible. I'm not adverse to doing it using JavaScript but i'm not exactly an expert with JavaScript and wouldn't know where to start.

PhilWheatley
  • 63
  • 5
  • 1
    What do you mean by "it doesn't resize with the browser window"? Do you want your octagon to increase in size, or do you want many copies of this octagon to fill the browser background? – Andrei Volgin Sep 24 '12 at 03:00

4 Answers4

4

Are you trying to achieve something like this? (resize browser window to see how it behaves).

.o {
  float: left;
  overflow: hidden;
  position: relative;
  padding: 5%;
}

.o::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: rotate(45deg);
  background: linear-gradient(dodgerblue, black);
  content: '';
}
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>

Or something like this?

.o-outer {
  float: left;
  position: relative;
  padding: 5%;
  margin: 4.33% -3% 0 0
}

.o {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

.o::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: rotate(45deg);
  background: radial-gradient(dodgerblue, black);
  content: '';
}

.o-outer:nth-child(even) .o {
  margin: 71.66% 0 -71.66% 0;
}
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
Erick Petrucelli
  • 14,386
  • 8
  • 64
  • 84
Ana
  • 35,599
  • 6
  • 80
  • 131
  • The first is exactly what im after, the fact it was as simple as rotating a square annoys me to no end, I feel incredibly stupid. Transform seems to effect performance slightly but this is by far the simplest solution. Thank you. – PhilWheatley Sep 24 '12 at 12:43
1

The below is just an alternate way to your problem, I dont know how complex you want to go, but I would follow applying different css depending on the device. PLEASE CONSIDER THE COMPLEXITY OF YOUR PROJECT.

If the website is going to b viewed on multiple devices, I would suggest using different CSS for different devices / browsers.

<link rel="stylesheet" media="screen and (min-device-width: 500px)" href="500example.css" />

The above code will apply the said css to devices with witdh of 500 and above.

This is a neat way of ding it as it checks for the device width and not the browser width, as this is very useful when using mobile / hand held devices.

Another way is to check the browser width. 

<link rel='stylesheet' media='screen and (min-width: 500px) and (max-width: 800px)' href=example2.css' />

The above code will apply the style sheet only if the browser window is between 500px and 800px.

You can write a function to check the conditions to apply the css.

Add the files

<link rel="stylesheet" type="text/css" href="main.css" /> 
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="example2.css" />

Every time the window is adjusted you can check for the css to apply, [Add jQuery] 

function adjust(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/ex1.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/ex2.css");
    } else {
        $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjust($(this).width());
    $(window).resize(function() {
        adjust($(this).width());
    });
});
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Rahul
  • 1,549
  • 3
  • 17
  • 35
  • This makes perfect sense really, i think i was just strung up on a more fluid resize but its not really necessary. I have chosen the answer provided by @Ana as the solution however if that proves to lower performance i will use this method instead. Thank you. – PhilWheatley Sep 24 '12 at 12:46
0

If I understand you correctly, this is not a problem you should solve using Javascript. Too heavy and clumsy

I think you can sort this purely with CSS if you can give up on creating them using CSS. In this case try background-size with percentage, some examples here: http://whereswalden.com/files/mozilla/background-size/more-examples.html and here https://developer.mozilla.org/en-US/docs/CSS/background-size

Alternatively if your aim is support for mobile devices, you might want to just disable possible zooming How can I "disable" zoom on a mobile web page?

Community
  • 1
  • 1
ido
  • 811
  • 2
  • 8
  • 20
  • background-size would be the solution if i was to go the image route, however i am trying to create the octagon in pure css, however thank you for your answer. – PhilWheatley Sep 24 '12 at 12:50
0

The OP said, he drew the image in CSS, so using background-size won't work. Could you please post the CSS code you wrote to draw the octogon?

Though to be honest I do agree with ido, and don't really see a huge performance improvement of using a css drawn image (versus a png), especially when you plan to simply it across as some kind of decorative feature.

Anyways, please take a look at this JsFiddle: http://jsfiddle.net/XkM9R/10/, I'm still working on the dynamic resizing.

ksrb
  • 1,797
  • 12
  • 22
  • This is a comment, not an answer. – Andrei Volgin Sep 24 '12 at 02:58
  • Sorry about that I didn't see a comment tab at the bottom of the OP post so this was the only way I could ask a question anyways I've modified my post to be a answer :). – ksrb Sep 24 '12 at 03:06
  • I did not write the code itself, i believe we actually found the same source for it as that is identical to the code im using for it. The problem i came across modifying that code for responsive layouts is that it requires percentage sizing instead of pixel, but this is not possible on borders which are an integral part of creating the octagon. The reason for using css instead of an image is not really for performance but to avoid quality loss with image scaling (which could be done by creating a larger octagon image than actually required but then performance becomes an issue). – PhilWheatley Sep 24 '12 at 12:35