enter image description here

( https://i.stack.imgur.com/UxYxs.png )

If we have a triangle (say with sharp corners, not like in the photo) made with css, and there is a similar triangle in the center of the first one, can we subtract one triangle from another to get a triangular frame (as in the example )

  • Try z-index, that is, a smaller triangle should overlap the larger one. The rest is purely visual. - Adokenai
  • Related: stackoverflow.com/q/929118/262779 - LFC
  • This is not part of the css cross-browser framework, but there is svg and it was made just for such perversions - MaximLensky

2 answers 2

In general, as I said - we draw two triangles - we make more complex and impose a pattern with a picture, and at the output we get this thing

Made in inkscape , drew one triangle painted it with black (it gives transparency), the second and filled it with white (it gives opacity) did объеденить went into the tyrnet and chose the picture and set it in the pattern and that's it. fill:url(pattern); fill is the same background

 <svg viewBox="0 0 148 87" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <pattern id="pattern" width="571.21461" height="334.54352" patternTransform="matrix(.26 0 0 .26 -299 74)" patternUnits="userSpaceOnUse"> <image x="-2.8e-14" y="8.4e-14" width="571" height="335" style="image-rendering:optimizeQuality" preserveAspectRatio="none" xlink:href="https://img.fonwall.ru/o/92/tropiki-more-plyaj-peyzaji1.jpg"/> </pattern> </defs> <g transform="translate(-30 -167)"> <path transform="matrix(.67 -.0053 .0082 .44 38 158)" d="m95 172-71-128 147 2.6zm-1.4 46-107-199 220 4z" style="fill-rule:evenodd;fill:url(#pattern);"/> </g> </svg>

    Something happened, did you need it?

     .helper-block { position: relative; margin-top: 20px; margin-left: 20px; } .triangle-main { border: 100px solid #000; height: 0px; width: 0px; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; margin-bottom: -100px; margin-top: 20px; position: absolute; top: 0; left: 0; } .triangle-child { border: 80px solid #fff; height: 0px; width: 0px; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; margin-bottom: -100px; margin-top: 20px; position: absolute; top: 9px; left: 20px; } 
     <div class="helper-block"> <div class="triangle-main"></div> <div class="triangle-child"></div> </div>

    • Yes, but only with the condition that there is a picture in the background, and that instead of #fff this picture would appear - Shosty
    • one
      This was not specified in the quest condition. - bla bla213213213