Пользовательская граница в css для woocommerce

Question

Я создаю для своего клиента магазин woocommerce. он хотел, чтобы все изображения продукта имели рамку (или форму), как показано ниже:

Я знаю, что для доступа к изображению продукта мне просто нужно выбрать:

.woocommerce .product img {
   //code
}

но я не знаю, как создать такую ​​границу.

Можете ли вы помочь мне с решением?

Answer 1

Вам необходимо использовать свойство clip-path: polygon() CSS. Пожалуйста, смотрите пример.

Из вашего сценария использования вам нужно поместить изображение во внутренний блок. А если вам нужны закругленные углы, то вам нужно добавить больше точек, чтобы сделать их закругленными (или, может быть, попробовать clip-path:circle() свойство).

.outside {
  position: relative;
	width: 70vmin;
	height: 70vmin;
	background: tomato;
	-webkit-clip-path: polygon(5% 8%, 50% 0, 94% 7%, 100% 50%, 94% 93%, 50% 100%, 7% 94%, 0 49%);

  clip-path: polygon(5% 8%, 50% 0, 94% 7%, 100% 50%, 94% 93%, 50% 100%, 7% 94%, 0 49%);
}

.inside {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: white;
 -webkit-clip-path: polygon(5% 8%, 50% 0, 94% 7%, 100% 50%, 94% 93%, 50% 100%, 7% 94%, 0 49%);

  clip-path: polygon(5% 8%, 50% 0, 94% 7%, 100% 50%, 94% 93%, 50% 100%, 7% 94%, 0 49%);
}

/* Center the demo */
html, body { height: 100%; }
body {
	display: flex;
	justify-content: center;
	align-items: center;
  background: papayawhip;
}

<div class="outside">
  <div class="inside"></div>
</div>