mrzgt

[class*='product-category-'] {стили}

Так подойдёт?:

<?php
    $classes = [
      'class 4',
      'class 1',
      'class 2',
      'class 3',
    ];

    $k = 1;
?>
<?foreach ($products as $product) {?>
    <? $class = $classes[$k % 4]; ?>
    <div class="<?= $class ?>">
        ...
    </div>
    <? $k++; ?>
<?}?>

Да, можно. через ::after или ::before

div{
border:1px solid;
position:relative;
}

div::before{
content: " ";
position:absolute;
top:10px;
left:-1px;
background-color:#CCC;
}

Можно вообще градиентом и multiple backgrounds для одного элемента сделать.
https://jsfiddle.net/oreda13p/1/

А вообще от конкретных целей и поддерживаемых браузеров зависит. Можно и тремя элементами (или одним тегом + :before, :after) с определенными параметрами transform сделать.
https://jsfiddle.net/oreda13p/2/

А может проще и вообще фоновой картинкой.

это две трапеции и треугольник habrahabr.ru/post/126207

svg

body {
  background-image: linear-gradient(90deg, #f00 0%, #f00 50%, transparent 51%, transparent 100%);
}

https://css-tricks.com/examples/ShapesOfCSS/
codepen.io/fecoder/pen/JoEKVM

<?php foreach (array_slice($category['children'], 0, 3) as $child) { ?>
<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
<?php } ?>

<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
    </div>
  </div>
</div>

$('#myModal').find('.modal-content').html(json['success']);

$('#myModal').modal('show');

Как то так

костыльнуть? jsfiddle.net/tennalian/fpgy9zx6

Используя обычные подручные рамки, linear-gradient и и transform:rotate получаем искомое.
Можно поизвращаться с perspective и rotateX, но полученный результат ужасен в FF.

И, по обыкновению, кладём фон с помощью SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="60" height="20" preserveAspectRatio="none" viewBox="0 0 60 20">
	<path fill="#ffb600" d="M 0,20 L 10 0 54 3 60 20 z"/>
</svg>