گوشه
برای داشتن یک صفحهی کاربر پسند، طراحی باید نرم و هیجانانگیز باشد. با طراحی درست گوشههای عناصر، به گردش چشم کاربران خود کمک کنید.
انواع
گوشههای تیز
برای داشتن گوشههای گرد از کلاس 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>