Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: suvr 26. 11. 2017, 16:05:57

Název: Vpravo doprava vlevo doleva
Přispěvatel: suvr 26. 11. 2017, 16:05:57

Ahoj lidi,
potřebuji sipku aby ta nalevo mirila doleva a napravo doprava a nechapu jak to ten ram dela, proc hidden, width mi nic nedela... Jak ty cisla funguji? Jen mam vyzkouseno ze border-left dela delku sipky.

(div style="width: 40px;
             height: 0;
             border-bottom: 20px solid transparent;
             border-top: 20px solid transparent;
             border-left: 10px solid red;
             overflow: hidden;")
(/div)

Dekuji predem za help.

Název: Re:Vpravo doprava vlevo doleva
Přispěvatel: gll 26. 11. 2017, 16:37:15

sipka je tvorena jen okrajem. Width a height by melo byt 0. To co chcete, jde udelat bud dvema divy, nebo pomoci after.

Název: Re:Vpravo doprava vlevo doleva
Přispěvatel: gll 26. 11. 2017, 17:27:23

jeden zpusob:

Kód: [Vybrat]

<div class=arrows></div>

<style>
 .arrows {
     width: 0px;
     height: 0px;
     border-bottom: 20px solid transparent;
     border-top: 20px solid transparent;
     border-right: 10px solid red;
     overflow: hidden;
 }
 .arrows:after {
     width: 0px;
     height: 0px;
     border-bottom: 20px solid transparent;
     border-top: 20px solid transparent;
     border-left: 10px solid red;
     overflow: hidden;
     position: absolute;
     left: 20px;
     transform: translateY(-50%);
     content:"";
 }
</style>


Název: Re:Vpravo doprava vlevo doleva
Přispěvatel: jiwopene@gmail.com 26. 11. 2017, 18:13:03

Předpokládám, že jde o HTML. Tam jsou <> špičaté závorky.

Citace: suvr  26. 11. 2017, 16:05:57

(div style="width: 40px;
             height: 0;
             border-bottom: 20px solid transparent;
             border-top: 20px solid transparent;
             border-left: 10px solid red;
             overflow: hidden;")
(/div)

Název: Re:Vpravo doprava vlevo doleva
Přispěvatel: gll 27. 11. 2017, 07:49:29

Citace: gll  26. 11. 2017, 17:27:23

jeden zpusob:

Kód: [Vybrat]

<div class=arrows></div>

<style>
 .arrows {
     width: 0px;
     height: 0px;
     border-bottom: 20px solid transparent;
     border-top: 20px solid transparent;
     border-right: 10px solid red;
     overflow: hidden;
 }
 .arrows:after {
     width: 0px;
     height: 0px;
     border-bottom: 20px solid transparent;
     border-top: 20px solid transparent;
     border-left: 10px solid red;
     overflow: hidden;
     position: absolute;
     left: 20px;
     transform: translateY(-50%);
     content:"";
 }
</style>


overflow: hidden tam být nemusí.

Kód: [Vybrat]

<div class=arrows></div>

<style>
 .arrows {
     width: 0px;
     height: 0px;
     border-bottom: 20px solid transparent;
     border-top: 20px solid transparent;
     border-right: 10px solid red;
 }
 .arrows:after {
     width: 0px;
     height: 0px;
     border-bottom: 20px solid transparent;
     border-top: 20px solid transparent;
     border-left: 10px solid red;
     position: absolute;
     left: 20px;
     transform: translateY(-50%);
     content:"";
 }
</style>


Název: Re:Vpravo doprava vlevo doleva
Přispěvatel: suvr 27. 11. 2017, 18:52:31

Citace: gll  27. 11. 2017, 07:49:29

Kód: [Vybrat]

><


dík funguje