Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
Michal Kuba
Redaktor
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
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í
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 8.12.2015 23:27
I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it ... Bill Gates
Avatar
Michal Kuba
Redaktor
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.