Pfthb

I'm looking to create this white arrow that goes inside the image with the HTML you can find in the snippet in a pure CSS way, not editing any HTML code.

.foto 
 width: 100%;
 float: left;
 min-height: 215px;
 background:
 linear-gradient(to bottom right,transparent 50%,#fff 0) bottom right/10% 50% no-repeat, linear-gradient(to bottom left,#fff 50%,transparent 0%) top right/10% 50% no-repeat, url(https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg) center/cover

<div class="foto bg_fix"><img src="https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg" itemprop="image" width="724" height="230" style="display: none;"></div>

If you do not need to support Edge, you can get away with the clip-path. It's by far the easiest solution to your problem.
You can check the support on CanIUse

Also, amazingly helpful tool for this is Clippy, but don't forget to read about this technique on MDN - CSS clip-path.

.foto 
 width: 100%;
 float: left;
 min-height: 215px;

 -webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
 clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);

 /* first value is X, and second value is Y coordinate. Feel free to experiment with percentages according to your needs. */

SOLUTION 2:
Old "trick" which has much much better support => CSS shapes.

You would basically need to create a new element (which is going to be your white triangle) and then put it on top of that image. Here's a sample code for a triangle that you need:

#triangle-left 
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-right: 100px solid red; /* red is just for display puproses */
 border-bottom: 50px solid transparent;

<div id="triangle-left"><div>

Btw, you have both background-image and img tag in your html. Decide which one you want to use, and if you have problem with cropping the image, you may want to look into background position and/or object-fit.

You can correct you gradient like below. You were almost good, simply switch the position of both making the bottom one on the top and the top on on the bottom:

.foto 
 min-height: 200px;
 background:
 linear-gradient(to bottom right,transparent 49.8%,#fff 50%) top right/10% 50%,
 linear-gradient(to top right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
 url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
 background-repeat:no-repeat;

<div class="foto bg_fix" ></div>