Vpravo doprava vlevo doleva

[suvr]

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.

[Reklama]

[gll]

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

[gll]

jeden zpusob:

Kód [Vybrat] Rozbalit


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


[jiwopene@gmail.com]

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

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

[gll]

jeden zpusob:

Kód [Vybrat] Rozbalit


<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] Rozbalit


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


[Reklama]

[suvr]

Kód [Vybrat] Rozbalit


><


dík funguje