Wie kann ich diese CSS-Zeichnung ansprechen, vorausgesetzt, ihr Container reagiert bereits?

Ich versuche, ein Monitordesign mit reinem CSS zu erstellen. Derzeit habe ich dies:Wie kann ich diese CSS-Zeichnung ansprechen, vorausgesetzt, ihr Container reagiert bereits?

CSS Monitor Design Fiddle

Es sieht ok, aber wenn Sie mit der Bildschirmgröße spielen, um das Design selbst ist nicht ansprechbar. Der übergeordnete Container reagiert dank Skeleton.

Jetzt will ich diese Dinge tun:

Machen Sie das Design ansprechende und fit zu jeder Bildschirmgröße.
Behalten Sie das Seitenverhältnis des Bildschirms bei. Das ist das Hauptproblem. Ich probierte Dinge wie Breite: 100%, aber ohne eine feste Höhe funktionieren die Dinge nicht.
Schließlich möchte ich die Monitorbasis verdrahtet werden, das heißt, ich möchte, dass das Trapez nur Ränder und keine Füllfarbe hat.

Jede Hilfe wird sehr geschätzt!

Mein Code:

HTML

<body> 
    <div class="container"> 
      <div class="monitor-container"> 
       <div class="monitor-top"> 
        <div class="screen-content"> 

        </div> 
       </div> 
       <div class="monitor-base"> 
       </div> 
      </div> 
     </div> 
</body>

CSS

.monitor-container { 
       margin: 25px; 
       padding: 25px; 
       border: 1px solid #000; 
      } 
      .monitor-top { 
       margin: auto; 
       width: 400px; 
       height: 250px; 
       border: 1px solid #000; 
       border-radius: 5px; 
      } 

      .screen-content { 
       margin: 25px; 
       width: 350px; 
       height: 200px; 
       border: 1px solid #000; 
       border-radius: 5px; 
      } 

      .monitor-base { 
       margin: 0 auto; 
       border-bottom: 50px solid black; 
       border-left: 25px solid transparent; 
       border-right: 25px solid transparent; 
       height: 0; 
       width: 100px; 
       border-radius: 5px; 
      }

Für die vorformulierten, verwende ich diese:

https://raw.githubusercontent.com/dhg/Skeleton/master/css/normalize.css

https://raw.githubusercontent.com/dhg/Skeleton/master/css/skeleton.css

Quelle

2016-06-10 Tahmid Khan Nafee

Diese Frage ist entweder zu breit, meinungsbasiert oder erfordert eine Diskussion und ist daher off-topic für Stack Overflow. Wenn Sie ein spezifisches, beantwortbares Programmierproblem haben, geben Sie bitte alle Einzelheiten an. –

Auf diese Weise https://jsfiddle.net/stngL8hc/1/ ... können Sie mit% und Padding versuchen, den Aspekt beizubehalten – DaniP

die trapez Sie einen anderen trapez über die Spitze zu setzen, benötigen Sie einen verkabelten Effekt zu geben. Die Art und Weise, wie Sie es mit den Grenzen gemacht haben, kann nicht in sich selbst verwendet werden, um ein drahtgebundenes Gefühl zu haben.

diese Zeile wie diese einen verkabelten Wirkung haben

.mb2 { 
     position:relative; 
     left:-22px; 
     top:2px; 
      margin: 0 auto; 
      border-bottom: 45px solid white; 
      border-left: 22px solid transparent; 
      border-right: 22px solid transparent; 
      height: 0; 
      width: 100px; 
      border-radius: 5px; 
     }

<div class="monitor-base"> 
     **<div class="mb2"> 
     </div>** 
      </div>

und die CSS hinzufügen. Das Seitenverhältnis ist etwas, das Sie benötigen, um einen JavaScript-Präprozessor zu verwenden, denke ich, in Vanille css glaube ich nicht, dass es möglich ist, das Seitenverhältnis zu erhalten, da die Höhe und Breite unabhängig sind, jedoch in scss oder weniger Sie können sie zusammenbinden. Ich denke.

Quelle

2016-06-10 16:51:23

Wie kann ich diese CSS-Zeichnung ansprechen, vorausgesetzt, ihr Container reagiert bereits?

Antwort

Verwandte Themen