Tell me how to create a triangle using css without a background?
enter image description here

    3 answers 3

    We take a square block, set the left and upper bound, and then rotate 45 degrees.

    .arrow { width: 20px; height: 20px; border: 1px solid #000000; border-width: 1px 0 0 1px; transform: rotate(-45deg) } 
     <div class="arrow"></div>

      As an example:

      We shove one div into another. On the outside, we assign the border on the one hand, on the inside - on the other two, while turning the inside on 45 degrees and placing it relative to the first.

       #wrapper { background: url(http://cdn.fishki.net/upload/post/2017/03/19/2245758/tn/01-beautiful-white-cat-imagescar-wallpaper.jpg) no-repeat; height: 400px; } .container { width: 235px; height: 215px; position: relative; border-right: 2px solid #e74c3c; } .triangle { position: absolute; margin: auto; width: 150px; height: 150px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); border-left: 2px solid #e74c3c; border-bottom: 2px solid #e74c3c; right: -75px; top: 32px; } .demo { position: fixed; margin: auto; right: 0; bottom: 0; background: #fff; background: rgba(255, 255, 255, .9); width: 400px; height: 220px; padding-top: 120px; } 
       <div id="wrapper"> <div class="container"> <div class="triangle"></div> </div> </div>

      • But this triangle will turn out to set a non-uniform background? - user33274
      • Heterogeneous is what? - Alexey Shimansky
      • Well, for example, the usual image, well, let's say the sea! - user33274
      • @ MaksimLensky well, if for container put overflow: hidden; - then yes. - Alexey Shimansky
      • I did it - nonsense .. only on svg is it real - user33274

      can create a block, rotated 45 degrees in it, and move it up 50% with overflow: hidden. Then you will have a square, which you can set the border at 1px and no background ... as you think so, but not a fact