CSS triangle menu
 
mroctagon20. sep 2016 10:21:37Pridružen od:
5. sep 2006
364 objav
+184-151
#1Pozdravljeni

Zanima me kako bi lahko naredil menu, da bi se ob hover efektu na koncu menuja prikazal "trikotnik", ki pa se poveča glede na višino menu povezave (li). Širina trikotnika mora biti vedno enaka, samo višina, se glede na tekst poveča.

Primer: http://postimg.org/image/aqboa79lx/
nazadnje urejal mroctagon 20. sep 2016 10:22:15
všeč(0)ni všeč(0)spam(0)
 
wingback20. sep 2016 10:43:23Pridružen od:
19. maj 2013
307 objav
+204-123
všeč(+2)ni všeč(0)spam(0)
 
dinozzaver20. sep 2016 16:56:17Pridružen od:
11. okt 2012
40 objav
+2600
#3Z fixed-size border trikotniki ne bo šlo samo s CSS.
Se da pa s CSS fino igrat :)

Takolele

Zaradi FF je je barva v rgb ne v hex.
všeč(+5)ni všeč(0)spam(0)
 
Matjaž20. sep 2016 21:04:27Pridružen od:
21. sep 2007
3421 objav
+2527-29341
#4<ul>
<li class="right-arrow">
<a href="#">Link with</a>
</li>
<li class="right-arrow">
<a href="#">Link with Right Arrow</a>
</li>
</ul>

.right-arrow {
width: 100px;
background-color: orange;
margin: 10px;
position: relative;
padding:15px;
list-style:none;
}
.right-arrow:after, .right-arrow:before {
content: "";
position: absolute;
left: 100%;
width: 20px;
height: 50%;
}
.right-arrow:before {
top: 0px;
background: linear-gradient(to top right, green 50%, transparent 51%);
}
.right-arrow:after {
bottom: 0px;
background: linear-gradient(to bottom right, green 50%, transparent 51%);
}
.right-arrow:hover:after, .right-arrow:hover:before {
width: 40px;
}

https://jsfiddle.net/mmupt2c6/
všeč(+5)ni všeč(0)spam(0)
 
mroctagon21. sep 2016 15:01:19Pridružen od:
5. sep 2006
364 objav
+184-151
#5Najlepša hvala vsem trem za rešitev problema.
všeč(0)ni všeč(0)spam(0)
 
stran 1 od 1 |<<1>>|