Dla projektu pracuję nad I muszę stworzyć siatkę Octononów. Mogę utworzyć ośmiokąt za pomocą CSS Problem polega na tym, że nie jest reaguje na przeglądarkę, ponieważ nie zmienia rozmiaru w oknie przeglądarki. Jest to ważne, ponieważ strona internetowa ma być wyświetlana na wielu urządzeniach, a siatka musiałaby być widoczna na urządzeniach mobilnych.

Octogonowie są wyłącznie do celów wyświetlania, więc możliwe, że mogę po prostu użyć tła obrazu, ale chciałbym uniknąć tego, jeśli to możliwe. Nie jestem niekorzystny, aby wykonać go za pomocą JavaScript, ale nie jestem do końca ekspertem z JavaScript i nie wiedziałbym, gdzie się rozpocząć.

3
PhilWheatley 24 wrzesień 2012, 06:18

4 odpowiedzi

Najlepsza odpowiedź

Czy próbujesz osiągnąć coś takiego? (Zmień rozmiar przeglądarki, aby zobaczyć, jak się zachowuje).

.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>

Lub coś w tym stylu?

.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>
4
Erick Petrucelli 22 sierpień 2019, 17:58

Poniższy jest tylko alternatywny sposób na twój problem, nie wiem, jak kompleks chcesz iść, ale postępowałbym zastosowanie różnych CSS w zależności od urządzenia. Proszę rozważyć złożoność swojego projektu.

Jeśli strona internetowa będzie przeglądana na wielu urządzeniach, sugerowałem użycie różnych CSS dla różnych urządzeń / przeglądarek.

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

Powyższy kod zastosuje wspomniane CSS do urządzeń o szerokości 500 i wyższych.

Jest to schludny sposób na ding, ponieważ sprawdza szerokość urządzenia, a nie szerokości przeglądarki, ponieważ jest to bardzo przydatne przy użyciu urządzeń mobilnych / ręcznych.

Innym sposobem jest sprawdzenie szerokości przeglądarki.

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

Powyższy kod będzie zastosować arkusz stylów tylko wtedy, gdy okno przeglądarki wynosi od 500px do 800px.

Możesz napisać funkcję, aby sprawdzić warunki, aby zastosować CSS.

Dodaj pliki.

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

Za każdym razem, gdy okno jest regulowane, możesz sprawdzić dla aplikacji CSS, [Dodaj 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());
    });
});
1
marc_s 4 luty 2016, 06:45

Jeśli rozumiem cię poprawnie, nie jest to problem, który należy rozwiązać za pomocą JavaScript. Zbyt ciężkie i niezdarne

Myślę, że możesz sortować to wyłącznie z CSS, jeśli możesz zrezygnować z tworzenia ich za pomocą CSS. W tym przypadku spróbuj background-size z procentem, kilka przykładów tutaj: http://whereswalden.com/files/mozilla/background-Size/more-examples.html i tutaj https://developer.mozilla.org/en-us/docs/css/background-Size

Alternatywnie, jeśli Twój cel jest wsparcie dla urządzeń mobilnych, możesz po prostu wyłączyć możliwe powiększanie Jak mogę" wyłączyć "zoom na mobilnej stronie internetowej?

0
Community 23 maj 2017, 12:07

Opowiedział OP, przyciągnął obraz w CSS, więc użycie rozmiaru tła nie działa. Czy mógłbyś opublikować kod CSS, który napisałeś, aby narysować Octogon?

Chociaż szczerze mówiąc, zgadzam się z IDO i nie widzę ogromnej poprawy wydajności przy użyciu obrazu CSS (w porównaniu z PNG), zwłaszcza gdy planujesz po prostu w jakimś rodzaju funkcji dekoracyjnej.

W każdym razie spójrz na to JSFiddle: http://jsfiddle.net/xkm9r/10/, Nadal pracuję nad dynamicznym zmianami rozmiaru.

0
ksrb 24 wrzesień 2012, 03:06