گوشه

برای داشتن یک صفحه‌ی کاربر پسند، طراحی باید نرم و هیجان‌انگیز باشد. با طراحی درست گوشه‌های عناصر، به گردش چشم کاربران خود کمک کنید.

انواع

گوشه‌های تیز

برای داشتن گوشه‌های گرد از کلاس joqd sharp-corner استفاده کنید.

با گوشه‌های تیز، border-radius: 0px خواهد بود.

این قسمت گوشه‌های تیزی دارد.

<div class="joqd red-darken-3 sharp-corner elevate-2 demo-panel">
	<p>.این قسمت گوشه‌های تیزی دارد</p>
</div>
گوشه‌های نرم

برای داشتن گوشه‌های نرم از کلاس joqd soft-corner استفاده کنید.

با گوشه‌های نرم، border-radius: 2px خواهد بود.

این قسمت گوشه‌های نرمی دارد.

<div class="joqd blue-grey soft-corner elevate-2 demo-panel">
	<p>.این قسمت گوشه‌های نرمی دارد</p>
</div>
گوشه‌های گرد

برای داشتن گوشه‌های گرد از کلاس joqd round-corner استفاده کنید.

با گوشه‌های گرد، border-radius: 20px خواهد بود.

این قسمت گوشه‌های گردی دارد.

<div class="joqd deep-purple round-corner elevate-2 demo-panel">
	<p>.این قسمت گوشه‌های گردی دارد</p>
</div>
گوشه‌های دایره‌ای

برای داشتن گوشه‌های دایره‌ای (در واقع یک دایره) از کلاس joqd circle-corner استفاده کنید.

با گوشه‌های دایره‌ای، border-radius: 50% خواهد بود.

  • توجه داشته باشید، زمانی عنصر دایره‌ی کامل خواهد بود که عرض و ارتفای آن برابر باشد.

<div class="joqd blue circle-corner">
  <!-- این عنصر گرد است -->
</div>

جهت‌ها

گوشه‌های بالا

برای آن که فقط گوشه‌های بالایی عنصر را تغییر دهید، از پسوند کلاس top-corner- بعد از نوع گوشه استفاده کنید.

گوشه‌های بالایی این قسمت، نرم هستند.

<div class="joqd indigo soft-top-corner elevate-2 demo-panel">
	<p>.گوشه‌های بالایی این قسمت، نرم هستند</p>
</div>
گوشه‌های پایین

برای آن که فقط گوشه‌های پایینی عنصر را تغییر دهید، از پسوند کلاس top-corner- بعد از نوع گوشه استفاده کنید.

گوشه‌های پایینی این قسمت، نرم هستند.

<div class="joqd brown soft-corner elevate-2 demo-panel">
	<p>.گوشه‌های پایینی این قسمت، نرم هستند</p>
</div>
گوشه‌های راست

برای آن که فقط گوشه‌های سمت راست عنصر را تغییر دهید، از پسوند کلاس right-corner- بعد از نوع گوشه استفاده کنید.

گوشه‌های سمت راست این قسمت، نرم هستند.

<div class="joqd pink-darken-1 soft-right-corner elevate-2 demo-panel">
	<p>.گوشه‌های سمت راست این قسمت، نرم هستند</p>
</div>
گوشه‌های چپ

برای آن که فقط گوشه‌های سمت چپ عنصر را تغییر دهید، از پسوند کلاس left-corner- بعد از نوع گوشه استفاده کنید.

گوشه‌های سمت چپ این قسمت، نرم هستند.

<div class="joqd light-green-darken-2 soft-left-corner elevate-2 demo-panel">
	<p>.گوشه‌های سمت چپ این قسمت، نرم هستند</p>
</div>