picture frame How to set a picture or block a frame in the form of triangles? Option with border-image is not suitable, because you need to be able to change the color of these triangles. This is how the image on the site should look

    2 answers 2

    It turned out this option

    Example - black background

    body{ background: #000; } .b-1 { position: relative; margin: 15px; width: 400px; height: 200px; background: url(https://i.ytimg.com/vi/qW3WioRxMhU/maxresdefault.jpg) no-repeat center top; background-size: cover; } .b-1:before, .b-1:after{ content: ''; position: absolute; left: 0; width: 100%; height: 10px; z-index: 1; background-size: 15px 15px; background-repeat: repeat-x; height: 15px; } .b-1:before { top: 0; background-image: linear-gradient(40deg, transparent 10px, #000 11px), linear-gradient(320deg, transparent 10px, #000 11px); } .b-1:after{ bottom: 0; background-image: linear-gradient(320deg, #000 10px, transparent 11px), linear-gradient(40deg, #000 10px, transparent 11px); } 
     <div class="b-1"></div>

    Example - red background

     body{ background: #f00; } .b-2 { position: relative; margin: 15px; width: 400px; height: 200px; background: url(https://i.ytimg.com/vi/qW3WioRxMhU/maxresdefault.jpg) no-repeat center top; background-size: cover; } .b-2:before, .b-2:after{ content: ''; position: absolute; left: 0; width: 100%; height: 10px; z-index: 1; background-size: 15px 15px; background-repeat: repeat-x; height: 15px; } .b-2:before { top: 0; background-image: linear-gradient(40deg, transparent 10px, #f00 11px), linear-gradient(320deg, transparent 10px, #f00 11px); } .b-2:after{ bottom: 0; width: 100%; height: 15px; background-image: linear-gradient(320deg, #f00 10px, transparent 11px), linear-gradient(40deg, #f00 10px, transparent 11px); background-size: 15px 15px; background-repeat: repeat-x; height: 15px; } 
     <div class="b-2"></div>

    • Thanks a lot, that's exactly what I needed :) - Leonid

    Option with border-image is not suitable, because you need to be able to change the color of these triangles.

    Fit Do triangles need to make a transparent background. If necessary, you can use border-color. Although, there is a suspicion that there will simply be enough transparent.

    • Can you please drop the sample code when the frame with triangles through the border-image works correctly? I do not fully understand how this can be done through this property, I added a picture of triangles to the question - Leonid
    • @ Leonid, I thought something that the picture itself is already with triangles. If not, you have to think. Perhaps svg with currentColor will do. - Qwertiy ♦