creando un triangolo css in percentuale

Question

Sto cercando di creare un div che è quadrato sul sito superiore e sfocia in un triangolo,

la parte piazza non è così difficile, e funziona bene, ma la parte triangolo è un po 'più difficile. La casella deve cambiare dalla dimensione alla dimensione dello schermo, nel quadrato lo ho fatto usando% in larghezza e altezza, ma non posso usare il segno% nella proprietà border

Il codice che ho in questo momento

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;  
} 

il JavaScript è utilizzato per impostare la classe: l'ho fatto perché io uso un parralax Li brary e voleva impostare il pulsante su "attiva", a una certa altezza

Spero che qualcuno me (e forse altri) può aiutare con questo problema

jsfiddle example La mia idea è che quando il div è impostato sulla classe menuItemActive, avrà la freccia, il resto non questo è solo quando è impostato su attivo

Answer 1

ho trovato la soluzione utilizzando javascript invece di percentuale, Fiddle Spero che questo possa aiutare altre persone oltre

Il java script che ho usato è questo:

$(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

suo meglio usare un'immagine di sfondo per la forma di questo personalizzato che sarà più facile per manager e si può fallo regolare per diverse risoluzioni facilmente

Answer 3

Questo utilizza due div sovrapposte per creare il triangolo e this method per rendere le cose fluide mantenendo le proporzioni.

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; 
} 

ho lasciato senza un background così si poteva vedere come funziona.

Answer 4

È possibile eseguire triangoli in CSS.

Ecco un collegamento a un articolo, delineando la tecnica generale: http://css-tricks.com/snippets/css/css-triangle/. C'è anche una varietà di approcci simili/altri per situazioni leggermente diverse che ho trovato e usato, basta cercare "triangoli CSS".

di descrivere brevemente la tecnica: utilizza quattro bordi su un elemento (se si voleva una freccia verso il basso, si sarebbe mettere questo elemento all'interno del vostro <div id="overV12">, oppure a seconda dell'effetto, applicare al vostro interno <div>). Alcuni sono trasparenti, altri no. Modificando le larghezze e i colori dei bordi, puoi generare triangoli CSS, che possono essere completamente personalizzati per formare diversi gradi angolari, lunghezze, ecc. Ho anche visto questo concetto usato per creare fumetti solo CSS e handle di suggerimenti.

Ho usato questa tecnica estensivamente, e nei miei casi d'uso, ha funzionato in ogni browser (anche se ricordo di avere un problema con IE6 su un progetto).