<div class="container"><a href="#">Text</a></div>
a {
font-family: 'Montserrat', sans-serif;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 1.5rem;
text-decoration: none;
padding: 1.5rem 2.5rem;
border: 1px solid white;
border-radius: 4px;
text-indent: 1.5rem;
color: white;
display: block;
position: relative;
}
a::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 1rem;
height: 1rem;
transform: translateX(-50%);
border-top: 1rem solid white;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
}
a::after {
content: '';
position: absolute;
top: -1px;
left: 50%;
width: 1rem;
height: 1rem;
transform: translateX(-50%);
border-top: calc(1rem - 1px) solid #2aac65;
border-left: calc(1rem - 1px) solid transparent;
border-right: calc(1rem - 1px) solid transparent;
}
const parentSelector = '.wrap';
const wrapperTag = 'div';
const wrapperClass = 'wrap-item';
const wrapSize = 4;
const $items = $(parentSelector).children();
for (let i = 0; i < $items.length; i += wrapSize) {
$items.slice(i, i + wrapSize).wrapAll(`<${wrapperTag} class="${wrapperClass}">`);
}
const parent = document.querySelector(parentSelector);
const items = [...parent.children];
parent.append(...Array.from(
{ length: Math.ceil(items.length / wrapSize) },
(n, i) => {
const wrapper = document.createElement(wrapperTag);
wrapper.classList.add(wrapperClass);
wrapper.append(...items.slice(i * wrapSize, (i + 1) * wrapSize));
return wrapper;
}
));