• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Css i Transform

Aruba Cloud - Virtual Private Server VPS
0 głosów
132 wizyt
pytanie zadane 25 czerwca 2018 w HTML i CSS przez grands14320 Obywatel (1,080 p.)

Witam.

Od kilku godzin próbuje na różne sposoby uzyskać w CSS efekt taki jak na obrazku 

ale ciągle div nr.3 (obrazek 3) układa się nieprawidłowo.Nie proszę o gotowe rozwiązanie a jedynie o wskazówkę jak osiągnąć pożądany efekt.

Mój kod:

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head> 
    <body>
        <div class="container">           
            <div class="div1" >           
                <P> 1 </P>            
            </div>
            <div class="div2">
                <P> 2 </P>          
            </div>
            <div class="div3">             
                <P> 3 </P>          
            </div>
        </div>
    </body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.container div.div1
{ 
    width:43%;
    height: 100%;
    background-color: aqua;
    transform-origin:top right;
    transform: skewX(-13deg);

}

.container div.div2
{

    width:33%;
    height: 100%;
    background-color: black;
    transform-origin:top right;
    transform: skewX(-13deg);

}

.container div.div3
{
    width:30%;
    height: 100%;
    background-color: orange;
    transform-origin:bottom left;
    transform: skewX(-13deg);    
}

p{
    text-align: center;
    position: relative;
    top: 300px;
    color: aliceblue;
}


 

 

 

1 odpowiedź

0 głosów
odpowiedź 25 czerwca 2018 przez ScriptyChris Mędrzec (190,190 p.)

Zapewne nienajlepsze rozwiązanie, ale działa - dopisz do .container div.div3:

margin-left: -11px;

 

Podobne pytania

+1 głos
2 odpowiedzi 287 wizyt
pytanie zadane 22 listopada 2021 w HTML i CSS przez Billy Użytkownik (680 p.)
0 głosów
0 odpowiedzi 151 wizyt
pytanie zadane 11 lipca 2017 w JavaScript przez Alex.Ironside Stary wyjadacz (14,920 p.)
0 głosów
2 odpowiedzi 198 wizyt
pytanie zadane 6 maja 2018 w HTML i CSS przez Tradereu Użytkownik (780 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...