لینک کردن یک محیط دایره‌ای در css
شاید که وقتی تمامی divها و المان‌های متفاوت در اچ‌تی‌ام‌ال به شکل چهارضلعی است به چه شکل می‌توان دایره ساخت؟ بعد از ساخت دایره به چه شکل می‌شود آن‌را لینک کرد؟
لینک کردن یک محیط دایره‌ای در css
برای ساخت دایره به شکل زیر عمل می کنید:
<!DOCTYPE html>
<html>
<head>
<title>How To Make Circle - CamelCase</title>
<style type="text/css">
.circle
{
margin: 200px auto;
border-radius: 100%;
width: 300px;
height: 300px;
background: #000;
color:#fff;
text-align: center;
}
.circle p
{
font-size: 20px;
padding-top: 138.8px;
}
</style>
</head>
<body>
<div class="circle">
<p>CamelCase</p>
</div>
</body>
</html>
نتیجه:
در کد بالا ابتدا یک div تعریف کرده و به آن کلاس circle را نسبت دادیم؛ سپس با خاصیت border-radius در css و مقداردهی 100% به آن گفتیم که گوشه‌های شکل را به شکل دایره‌ای کن. بعد از اینکه این‌کار را کردیم باید محیط دایره را با width و height به اندازه ای بزرگ کنیم که شکل به صورت بیضی نشود و کاملا به شکل دایره نمایان شود. در مرحله‌ی بعد می‌خواهیم دایره‌ی بالا را با یک هایپرلینک به یک صفحه در وب لینک کنیم. برای این‌کار به روش زیر عمل می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>How To Make Circle - CamelCase</title>
<style type="text/css">
.circle
{
margin: 200px auto;
border-radius: 100%;
width: 300px;
height: 300px;
background: #000;
color:#fff;
text-align: center;
}
.circle p
{
font-size: 20px;
padding-top: 138.8px;
}
a
{
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<a href="http://camelcase.ir" title="camelcase.ir">
<div class="circle">
<p>CamelCase</p>
</div>
</a>
</body>
</html>
همان‌طور که مشاهده می‌کنید کد اولیه را ویرایش کرده و به کد فعلی رسیدیم. حالا یک دایره‌ی لینک شده دارید. اگر کد بالا را تست کنید مشاهده می‌کنید که خارج محیط دایره هم لینک شده است این مشکل به علت چهارضلعی بودن عنصر div می باشد اما راه حل آن چیست؟
برای حل این مشکل کافیست به روش زیر عمل کنید:
<!DOCTYPE html>
<html>
<head>
<title>How To Make Circle - CamelCase</title>
<style type="text/css">
body
{
text-align: center;
}
.circle
{
margin: 200px auto;
border-radius: 100%;
width: 300px;
height: 300px;
background: #000;
color:#fff;
text-align: center;
display: inline-block;
}
.circle p
{
font-size: 20px;
padding-top: 138.8px;
}
a
{
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<a href="http://camelcase.ir" title="camelcase.ir">
<div class="circle">
<p>CamelCase</p>
</div>
</a>
</body>
</html>
در کد بالا با استفاده از خاصیت display در کلاس circle این مشکل را حل کردیم. شما می‌توانید از این لینک فایل تمرین بالا را دانلود کنید و استفاده کنید.
نظرات خود را در ارتباط با “ترفند لینک کردن دایره در css” برای ما بنویسید.