ein CSS-Dreiecks in Prozent Schaffung

Question

Ich versuche, ein div zu erstellen, die auf der oberen Seite Platz und fließen in ein Dreieck,

der Platz Teil schwer, nicht so ist, und funktioniert gut, aber das Dreieck Teil ist ein bisschen schwieriger. Die Box muss von der Größe mit der Bildschirmgröße ändern, im Quadrat tat ich dies mit% in der Breite und Höhe, aber ich kann nicht das% -Zeichen in der Eigenschaft border verwenden

Der Code ich habe in diesem Moment

HTML

<div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div> 

CSS

div.menuItem 
{ 
height: 5.38%; 
width: 7.44%; 
position: fixed; 
background-color: rgb(239, 239, 239); 
cursor: pointer; 
z-index: 12; 
text-align: center; 
top: 4.3%; 
} 

div.menuItemHover 
{ 
height: 5.38%; 
width: 7.44%; 
position: fixed; 
cursor: pointer; 
z-index: 12; 
text-align: center; 
top: 4.3%; 
background-color: rgb(211, 211, 211); 
} 

div.menuItemActive 
{ 
height: 7.8%; 
width: 7.44%; 
position: fixed; 
cursor: pointer; 
z-index: 12; 
text-align: center; 
top: 4.3%; 
background-color: Black; 
color: White;  
} 

das JavaScript ist für die Einstellung der Klasse verwendet: i tat dies, weil ich eine parralax li verwenden bliothek und wollte

auf einer bestimmten Höhe

i jemand den Knopf auf „aktiv“ gesetzt hoffen mich (und vielleicht auch andere) kann helfen, mit diesem Problem

jsfiddle example Meine Idee ist, dass, wenn das div gesetzt auf Klasse menuItemActive, wird es auf den Pfeil hat, sonst nicht Dies ist nur, wenn sie auf dem aktiven

Answer 1

fand ich die Lösung von Javascript statt prozentualer verwenden, Fiddle Ich hoffe, dass dies auch einige andere Leute

helfen können

Das Java-Skript i benutzten:

$(document).ready(setSize()); 

function setSize() { 
    var halfWidth = ($('.div1').width())/2; 
    $('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px')); 
    $('.div2').css('top', ($('.div1').height())); 
} 

Answer 2

seinen besser zu verwenden, um ein Hintergrundbild für benutzerdefinierte wie diese geformt gesetzt, es wird es an der Agentur zu erleichtern und Sie können machen Sie es sich leicht für verschiedene Auflösungen anpassen

Answer 3

Dies verwendet zwei überlappende divs zum Erstellen des Dreiecks und this method, um die Dinge flüssig zu machen und gleichzeitig das Seitenverhältnis beizubehalten.

Working Example

.div1 { 
    width:100%; 
    height:100%; 
    border: 1px solid red; 
    position:absolute; 
    z-index:2; 
} 
.div2 { 
    width:70%; 
    min-height:70%; 
    transform:rotate(45deg); 
    border:1px solid blue; 
    position:absolute; 
    left:15%; 
    top:65%; 
    z-index:1; 
} 
#container { 
    display: inline-block; 
    position: relative; 
    width: 25%; 
} 
#dummy { 
    padding-top: 100%; 
} 
#element { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

Ich habe es ohne Hintergrund könnte man so sehen, wie es funktioniert.

Answer 4

Sie können in CSS Dreiecke machen.

Hier ist ein Link zu einem Artikel, der die allgemeine Technik umreißt: http://css-tricks.com/snippets/css/css-triangle/. Es gibt auch eine Vielzahl ähnlicher/anderer Ansätze für etwas andere Situationen, die ich gefunden und benutzt habe, suche einfach "css-Dreiecke".

Um die Technik kurz zu beschreiben: es verwendet vier Grenzen auf einem Element (wenn Sie einen Pfeil nach unten wollten, würden Sie dieses Element in Ihrem <div id="overV12">, oder je nach Effekt, wenden Sie es an Ihre innere <div>). Einige sind transparent, andere nicht. Durch Ändern der Rahmenbreiten und -farben können Sie CSS-Dreiecke generieren, die vollständig angepasst werden können, um verschiedene Winkelgrade, Längen usw. zu erstellen. Ich habe dieses Konzept auch zum Erstellen von CSS-only-Sprechblasen und Tooltip-Handles verwendet.

Ich habe diese Technik ausgiebig verwendet, und in meinen Anwendungsfällen funktionierte es in jedem Browser (obwohl ich mich erinnere, ein Problem mit IE6 in einem Projekt zu haben).