Белая стрелка CSS внутри div

Question

Я хочу создать эту белую стрелку, которая будет внутри изображения с HTML-кодом, который вы можете найти во фрагменте, простым способом CSS, без редактирования какого-либо HTML-кода.

.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>

Answer 1

Вы можете исправить свой градиент, как показано ниже. Вы были почти хороши, просто поменяйте положение, сделав нижний сверху и верхний снизу:

.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>

Answer 2

Если вам не нужна поддержка Edge, вы можете уйти с помощью clip-path. Это, безусловно, самое простое решение вашей проблемы. Вы можете проверить поддержку на CanIUse

Кроме того, удивительно полезным инструментом для этого является Clippy , но не забывайте читать об этой технике на 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. */

РЕШЕНИЕ 2: Старый "трюк", который намного лучше поддерживает => CSS-формы .
В основном вам нужно создать новый элемент (который будет вашим белым треугольником), а затем поместить его поверх этого изображения. Вот пример кода для треугольника, который вам нужен:

#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>

Кстати, у вас есть теги background-image и img в вашем html. Решите, какой из них вы хотите использовать, и если у вас есть проблемы с обрезкой изображения, вы можете посмотреть на фоновое положение и / или object-fit .