<style>
#mydiv {
	width: 100px;
	height: 100px;
	background: green;
}
</style>

<div id="mydiv"></div>

<script>
let generateClover = (ele, points=200, coe=2) => {
	let r = ele.offsetWidth / 2, pathAr = [];
	Array.from({length: points}).forEach((item,key) => {
		let angle = key * 2 * Math.PI / points;
		let x = r - r * Math.sin(coe * angle) * Math.cos(angle),
			y = r - r * Math.sin(coe * angle) * Math.sin(angle);
		pathAr.push(x + 'px ' + y + 'px');
	});
	ele.style.clipPath = 'polygon(' + pathAr.join(', ') + ')';
};

generateClover(mydiv,100,2);
</script>