پیشنمایش زنده
کد HTML
<div class="navigation-card">
<a href="#" class="tab">
<svg
class="svgIcon"
viewBox="0 0 104 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100.5 40.75V96.5H66V68.5V65H62.5H43H39.5V68.5V96.5H3.5V40.75L52 4.375L100.5 40.75Z"
stroke="black"
stroke-width="7"
></path>
</svg>
</a>
<a href="#" class="tab">
<svg
width="104"
height="100"
viewBox="0 0 104 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="21.5"
y="3.5"
width="60"
height="60"
rx="30"
stroke="black"
stroke-width="7"
></rect>
<g clip-path="url(#clip0_41_27)">
<mask
id="mask0_41_27"
style="mask-type:luminance"
maskUnits="userSpaceOnUse"
x="0"
y="61"
width="104"
height="52"
>
<path
d="M0 113C0 84.2812 23.4071 61 52.1259 61C80.706 61 104 84.4199 104 113H0Z"
fill="white"
></path>
</mask>
<g mask="url(#mask0_41_27)">
<path
d="M-7 113C-7 80.4152 19.4152 54 52 54H52.2512C84.6973 54 111 80.3027 111 112.749H97C97 88.0347 76.9653 68 52.2512 68H52C27.1472 68 7 88.1472 7 113H-7ZM-7 113C-7 80.4152 19.4152 54 52 54V68C27.1472 68 7 88.1472 7 113H-7ZM52.2512 54C84.6973 54 111 80.3027 111 112.749V113H97V112.749C97 88.0347 76.9653 68 52.2512 68V54Z"
fill="black"
></path>
</g>
</g>
<defs>
<clipPath id="clip0_41_27">
<rect
width="104"
height="39"
fill="white"
transform="translate(0 61)"
></rect>
</clipPath>
</defs>
</svg>
</a>
<a href="#" class="tab">
<svg
width="101"
height="114"
viewBox="0 0 101 114"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="46.1726"
cy="46.1727"
r="29.5497"
transform="rotate(36.0692 46.1726 46.1727)"
stroke="black"
stroke-width="7"
></circle>
<line
x1="61.7089"
y1="67.7837"
x2="97.7088"
y2="111.784"
stroke="black"
stroke-width="7"
></line>
</svg>
</a>
</div>
کد CSS
.navigation-card {
width: fit-content;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
background-color: rgb(255, 255, 255);
padding: 15px 20px;
border-radius: 50px;
}
.tab {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
overflow: hidden;
background-color: rgb(252, 252, 252);
padding: 15px;
border-radius: 50%;
cursor: pointer;
text-decoration: none;
transition: all 0.3s;
}
.tab:hover {
background-color: rgb(227, 223, 223);
}