Diskuze: Zajímavý design element

HTML a CSS HTML a CSS Zajímavý design element American English version English version

Avatar
Michal Kuba
Redaktor
Avatar
Michal Kuba:

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
Odpovídá na Michal Kuba
Michael Škrášek:

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í
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 8.12.2015 23:27
Proč to dělat složitě, když to jde jednoduše.
Avatar
Michal Kuba
Redaktor
Avatar
Odpovídá na Michael Škrášek
Michal Kuba:

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.