NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Michal Kuba
Tvůrce
Avatar
Michal Kuba:8.12.2015 23:11

Ahoj.
Budu se odkazovat na přiložený obrázek

Jak byste v HTML a CSS řešili nakodovaní takovéhoto tvaru? Jde mi o tu červenou část (nastavit border-radius) nahoře je cajk, ale jak provést ten ukos?

Mam k danemu elementu tento styl:

.row .boxik .hlavicka{
    background-image: -moz-linear-gradient( -90deg, rgb(231,48,42) 0%, rgb(186,39,34) 100%);
    background-image: -webkit-linear-gradient( -90deg, rgb(231,48,42) 0%, rgb(186,39,34) 100%);
    background-image: -ms-linear-gradient( -90deg, rgb(231,48,42) 0%, rgb(186,39,34) 100%);
}

Ale nefunguje to, jak má.. dělá to prostě jen barevný proužek přesně o výšce nadpisu, jenž je uvnitř <div class="hlavicka">

Díky :)

 
Odpovědět
8.12.2015 23:11
Avatar
Michael Škrášek
Tvůrce
Avatar
Odpovídá na Michal Kuba
Michael Škrášek:8.12.2015 23:27

Použitím after a rámečku:
HTML:

<div class="box">
        <div class="head">hlavicka</div>
        <div class="text">text</div>
</div>

CSS:

.box .head{
        width: 300px;
        height: 90px;

        padding-top: 5px;
        padding-bottom: 5px;

        text-align: center;

        background: red;
        position: relative;

        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
}

.box .head:after{
        top: 100%;
        left: 0px;

        position: absolute;
        content: " ";

        border-top: solid red 20px;
        border-left: solid transparent 150px;
        border-right: solid transparent 150px;
        border-bottom: solid transparent 0px;
}

.box{
        float: left;
        width: 300px;
}

.box .text{
        padding-top: 20px;
        text-align: center;
}

atd... prostě dostyluješ :)

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
8.12.2015 23:27
"I choose a lazy person to do a hard job. Because that person will find an easy way to do it. " Bill Gates
Avatar
Michal Kuba
Tvůrce
Avatar
Odpovídá na Michael Škrášek
Michal Kuba:9.12.2015 10:23

Díky moc :)
Našel jsem něco podobného, ale bez pseuda :after.. ale nějak jsem pochopil, že tam budu nastavovat pravý a levý border.. Je to fakt dobrá věc, díky :)

 
Nahoru Odpovědět
9.12.2015 10:23
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.