CODEWITHSUNDEEP
javascripthtmlcsswordpresswoocommerce
Mendi Sterenfeld
Mendi Sterenfeld

Reputation: 397

Custom border in css for woocommerce

I'm creating for my client a woocommerce shop. he wanted that all the product images should have a border (or shape) as the image below: border shape

I know that to access the product image i just have to select:

.woocommerce .product img {
   //code
}

but I don't know how to create such a border.

can you help me with a solution?

Upvotes: 0

Views: 573

Answers (1)

Pritam Mullick
Pritam Mullick

Reputation: 226

You need to use the clip-path: polygon() CSS property. Please see the example.

From your use-case, you need to put the image in the inside div. And if you want rounded corners, then you need to add more points to make it rounded (or may be try clip-path:circle() property).

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

Upvotes: 1

Related Questions