Box inclinat la sfarsit

Am cateva box-uri pe pagina, al2-lea am reusit sa-l inclin la inceput dar pentru ce alb nu, cum il pot inclina la fel ca cel negru?
Cel negru este inclinat la inceput pe cel alb vreau sa-l inclin la sfarsit.
Imagine: https://i.imgur.com/VMEuTci.png
Codul:

<style>
.box{
  position: relative;
  width:100%;
  height: auto;
}
</style>
<html>
<body>
<div class="box" style="background:white;" id="media">
  <h1 style="font-size:21px;"><u>MEDIA TEST !!</u></h1>
</div>
</body>
</html>

Mai mult ca sigur nu vrei sa-l inclini, ci sa creezi un element inclinat sub acesta. Daca il inclini, o sa afecteze tot continutul din pagina (doar nu vrei sa stai cu monitorul stramb ca sa citesti, nu?).

Te poti lega de clasa box si sa creezi un pseudo-element (:after sau :before).

.box {
    position: relative;
}
.box:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    border-style: solid;
    border-width: 200px 100vw 0 0;
    border-color: #ff0000 transparent transparent transparent;
}

Nu cred ca o sa iasa exact ce vrei tu, dar te poti juca putin prin cod. Nu am cum sa-mi dau seama, din moment ce nu am site-ul sa pot incerca pe el.

3 Likes

Mersi frumos Sebastian, am reusit sa fac ceva. Dar depaseste prea mult la final si iese din context, in partea stanga e super ok, este aliniat cum trebuie. La dreapta “sare” de final. Am incercat si cu width ceva dar n-am reusit sa-l fixez.
Imagine (rosu):
Untitled

Poti lasa un link de la site ? Imi este mai usor sa iti fac codul in functie de ce ai tu pe acolo.

Este la mine in PC… nu este hostat momentan.

Dai overflow hidden pe box.

Am incercat, tot nu functioneaza… Cu overflow hidden se duce in jos si se “uneste” cu cel negru incat sa nu mai existe spatiu intre ele.

Nu sunt singur ca am inteles, dar poate ii de folos:

Cu ajutorul lui Sebastian am rezolvat 80% problema, ideea acum este ca nu se alinieaza la final intre ele.

    <div class="box" style="background:white;" id="media">etc etc ... etc etc</br>etc etc
        <div style="position: absolute; left: 0; bottom: -99px; border-style: solid; border-width: 100px 100vw 0 0; border-color: red transparent transparent transparent;"></div>
    </div>
    <style>
    .box
    {
        position: relative;
        width:100%;
        height: auto;
    }
    </style>

Untitled

Incearca sa bagi css-ul in fisier, nu inline.

Legat de lipirea elementelor, modifica partea asta:

border-width: 100px 100vw 0 0; /* in loc de 100px pune cat ai nevoie */

Am modificat, a ramas la fel ca in imagine… chenarul rosu se duce mult spre dreapta si il depaseste pe cel alb.
Cu lipirea elementelor am rezolvat din border-width inainte, e ok acum. A ramas doar alinierea asta de rezolvat…

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

box-sizing: border-box;

Am incercat, tot nu functioneaza…

Daca nu incarci site-ul undeva, o sa se faca post-ul asta de 1000 reply-uri.

Nu te putem ajuta pana nu vedem exact unde-i problema. Incarca site-ul pe un host free si da-ne link

Eu cam asa as face: https://jsfiddle.net/ZsharE/xrg5dns9/

Clip path si Safari nu se impaca bine.