Diskuze: Tip jak na to.... Výseč kruhového borderu

HTML a CSS HTML a CSS Tip jak na to.... Výseč kruhového borderu American English version English version

Avatar
Xin_
Člen
Avatar
Xin_:

Napadá někoho jak tohle udělat?
černá - blok/div/cokoli
červena - chtěna "křivka" resp... nejraději bych to měl udělane z borderu..
jeden způsob mám přes :before ale potřebuju to na :hover a prvků bude takto víc u sebe a potřebuju aby se nepřesahovaly :D to by mi stačilo, nějaký ten system.. já už si to poupravím dle potřeby :D jen to "odseknout"

div{
        width: 298px;
        height: 298px;
        float: left;
        /*border: 1px solid blue;*/
        overflow: hidden;
}

div:before{
        position: absolute;
        content: '';
        height: 600px;
        width: 600px;
        border: 0px solid transparent;
        border-top: 0px solid #008cff;
        border-radius: 50%;
        transform: rotate(45deg);
        transition: 0.2s;
}
div:hover:before{
        position: absolute;
        content: '';
        border: 5px solid transparent;
        border-top: 5px solid #008cff;
        transition: 0.2s;
}

Už jena mě dneska moc hodin tak se zkusím zeptat tady :D :D

Editováno 25.2.2015 22:57
Odpovědět 25.2.2015 22:56
Zvědavost nás žene vpřed :)
Avatar
Xin_
Člen
Avatar
Odpovídá na Xin_
Xin_:

No napadla mě eště jiná víc "vyjeb*vací" verze jak by to šlo... páč to ve výsledku bude v krhu takže by stačilo udělat kruh,natočit a podle cursoru měnit border :D

ale klidně raďte dál :D třeba tu bude co zajmavé

Editováno 25.2.2015 23:00
Nahoru Odpovědět 25.2.2015 23:00
Zvědavost nás žene vpřed :)
Avatar
Xin_
Člen
Avatar
Odpovídá na Xin_
Xin_:

nebo wrapper... měl sem začít přemýšlet než sem to tu napsal :D

Nahoru Odpovědět 25.2.2015 23:02
Zvědavost nás žene vpřed :)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.