Tell me how you can make just such a strip of a ladder using css

enter image description here

    3 answers 3

    On html and css

     *{ box-sizing:border-box; } body{ margin:0; } .angles{ display:flex; align-items:flex-start; list-style:none; padding:0 0 0 10px; } .angles li{ width:30px; height:30px; border:4px solid yellow; border-left:none; border-bottom:none; transform:rotate(-37deg) skewX(14deg); transform-origin:center; margin-right:14px; } 
     <ul class="angles"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

    On svg

     #angles{ stroke-width:3px; stroke:yellow; fill:none; } 
     <svg width="142px" height="16px" viewBox="0 0 142 16" preserveAspectRatio="xMinYMid slice"> <path id="angles" d="M0,2 l15.778,13 15.778,-13 15.778,13 15.778,-13 15.778,13 15.778,-13 15.778,13 15.778,-13 15.778,13" /> </svg>

    • At the corners, the degree is not the same (however, in the svg version it is closer to “that”) - andreymal
    • @andreymal, I agree. The angle there is more direct. Corrected. - zhurof
    • @Gennadiy Zhurov, how to choose a strip of 142 by 16 and 4.5 teeth, as in the example? below there is a solution, but there on a white background. If transparent - it would be perfect! - John
    • one
      @ Vasya, updated svg-version - zhurof
    • Great, thank you! - John

     body { background: green; } ul { display: flex; list-style: none } .a::before { padding: 0; margin: 0; content: ""; position: relative; display: block; background: yellow; width: 17px; height: 2px; border-radius: 100px; transform: rotate(-20deg) } .a::after { padding: 0; margin: 0; content: ""; border-radius: 100px; position: relative; top: -2px; left: 15px; display: block; background: yellow; width: 17px; height: 2px; margin-right: 12px; transform: rotate(20deg) } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/main.css"> </head> <body> <ul> <li class="a"></li> <li class="a"></li> <li class="a"></li> <li class="a"></li> <li class="a"></li> <li class="a"></li> </ul> </body> </html>
    If you want to change the angle of the lines.

    • When I tried to make them thicker (as in the picture of the author), I started getting out that i.stack.imgur.com/cbrKT.png - andreymal
    • @andreymal must adjust margin-right - midia

    Of course, smoothing would not hurt, but you can use a linear-gradient :

     div { position: relative; height: 100px; background-color: #ffd800; background-size: 32px 20px; background-position: 0 0, 0 0, -16px 0, 16px 0px; background-image: linear-gradient(35deg, #fff 11px, transparent 0), linear-gradient(-35deg, #fff 11px, transparent 0), linear-gradient(-145deg, #fff 11px, transparent 0), linear-gradient(145deg, #fff 11px, transparent 0); } 
     <div></div>

    PS If the angle is 45deg then there are no artifacts.

    • thank you If you limit the width and height, it turns out what you need - Vasya
    • But is it only suitable for a white background? or can it be made transparent too? - John
    • one
      In my case, only with a white background. That is, here the background is actually yellow, and by overlaying white triangles we get a picture. - kizoso