Coś w stylu trójkąta

pytanie zadane 16 grudnia 2019 w HTML i CSS przez lukasz290521 Obywatel (1,410 p.)

Hej podeślecie mi link do poradnika jak zrobić tą taką strzałkę/trójkąt nie wiem co to jest, nie wiem jak to się nazywa odrazu po podesłaniu zmienie tytuł i treśc

3 odpowiedzi

odpowiedź 16 grudnia 2019 przez Tomek Sochacki Ekspert (227,490 p.)

ja bym to zrobił clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

nie ma to co prawda wsparcia w IE11 i chyba starszych edge, ale tu by trzeba pogadać z UX czy na pewno jest to dla nas problem.

komentarz 16 grudnia 2019 przez ScriptyChris Mędrzec (190,190 p.)

Albo utworzyć trójkąt z borderów.

odpowiedź 16 grudnia 2019 przez DawidK Nałogowiec (37,910 p.)

Pomysł mocno kombinowany i mam wrażenie, że trochę "na neandertala", Tło + 2 białe trójkąty w css trójkąty zasłaniające fragmenty tla.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Trójkąt</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <div class='city'>
    </div>
    <div class='triangle-left'>
    </div>
    <div class='triangle-right'></div>
</body>
</html>

main.css

*{
    margin: 0;
    padding: 0;
}


.city {
    background-image: url('city.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right top;
    height: 500px;
    width: 100vw;
  }

.triangle-left {
    position: relative;
    top: -100px;
    width: 0;
    height: 0;
    border-bottom: 100px solid white;
    border-right: 50vw solid transparent;
  }

  .triangle-right {
    position: relative;
    top: -200px;
    left: 50vw;
    width: 0;
    height: 0;
    border-bottom: 100px solid white;
    border-left: 50vw solid transparent;
  }