J'utilise ça maintenant,

@media (max-width: 1024px) { #icons { border-radius: 0px } }
@media (    width: 1025px) { #icons { border-radius: 1px 1px 0px 0px } }
@media (    width: 1026px) { #icons { border-radius: 2px 2px 0px 0px } }
@media (    width: 1027px) { #icons { border-radius: 3px 3px 0px 0px } }
@media (    width: 1028px) { #icons { border-radius: 4px 4px 0px 0px } }
@media (    width: 1029px) { #icons { border-radius: 5px 5px 0px 0px } }
@media (    width: 1030px) { #icons { border-radius: 6px 6px 0px 0px } }
@media (    width: 1031px) { #icons { border-radius: 7px 7px 0px 0px } }
@media (    width: 1032px) { #icons { border-radius: 8px 8px 0px 0px } }
@media (    width: 1033px) { #icons { border-radius: 9px 9px 0px 0px } }

Pour générer un rayon de bordure flexible, proportionnel à la largeur de la fenêtre du client. Cependant, cela semble ridicule.

Sinon, comment y parvenir? Merci!

4
user3054109 7 août 2016 à 09:01

3 réponses

Meilleure réponse

Peut-être utiliser un peu de codage dynamique, SEC (ne vous répétez pas) avec JS?

Les éléments suivants utilisent jQuery pour plus de commodité.

var win = $(window);
win.resize(function() {
  if(win.width() >= 1024) {
    var padding = win.width()-1024;
    $("#icons").css("border-radius", padding + "px " + padding + "px 0px 0px");
  }
}).resize();
#icons {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="icons">Try resizing the window to widths greater than 1024px.</div>

Ce qu'il fait:

  1. Caches $(window) pour éviter plusieurs requêtes DOM (qui sont lentes).
  2. Chaque fois que la fenêtre est redimensionnée, appelez la fonction.
  3. Si la largeur de la fenêtre est dans la plage (> 1024px), exécutez le code.
  4. Créez la chaîne border-radius en calculant le remplissage nécessaire.
  5. Fonction de déclenchement avec resize() en charge.
3
Jonathan Lam 7 août 2016 à 06:17

Utilisation de% au lieu de px. Vous pouvez spécifier la valeur de border-radius en pourcentages.

Vous pouvez également utiliser Javascript:

     bordervalue = window.innerWidth.toString().split('').pop();
     /*here you can modify border value as you wish*/
     document.getElementById("icons").style.borderRadius=bordervalue + "px " + bordervalue + "px 0px 0px";
0
7 août 2016 à 06:25

Les requêtes des médias ne sont pas ridicules ... Utiliser JS pour les remplacer est ridicule surtout quand c'est 2016.

@media (max-width: 1024px) { #icons { border-radius: 0px } }

@media (min-width: 1025px and max-width: 1033px) {
  #icons {
    border-radius: calc(100vw - 1024px) calc(100vw - 1024px) 0px 0px;
  }
}

@media (min-width: 1034px) {
  #icons {
    border-radius: 10px;
  }
}

Cela devrait faire l'affaire.

2
smnbbrv 8 août 2016 à 11:46