هنگامی که به یک لبه گرد نیاز داریم می توانیم از حاشیه-radius استفاده کنیم. اما اگر نیاز به ایجاد یک div با پایین خمیده داشته باشیم، چه؟
مسیر کلیپ CSS
اگر مسیر کلیپ CSS api doc را بخوانیم. متوجه خواهیم شد که می توانیم یک div را به هر شکلی که می خواهیم با مسیر برش دهیم
مسیر کلیپ: دایره (40%);
clip-path: path(‘M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 Z’);
مسیر svg را درک کنید
اگر این مسیر را در این ویرایشگر svg-path کپی کنید، می‌توانیم شکل آن را تجسم کنیم.
m 0 0 v 305.867 c 114 30 229 30 343 0 V 0 Z
تنها مشکل این است که همه این اعداد به چه معنا هستند. می توانید نقاط کنترل را کمی بکشید. سپس خواهید دید که آنها چیزی جز مختصات نقاط 2 بعدی نیستند.
یک مثال اساسی بنویسید
اگر متوجه شده اید که آن اعداد در مسیر فقط مختصات هستند، می توانیم شروع به نوشتن مثال خود کنیم
<template>
<div
class="demo"
:style="{ 'clip-path': `path('m 0 0 v 100 c 70 30 140 30 210 0 V 0 Z')`}"
>
<p :style="{'padding': '12px'}">hi</p>
</div>
</template>
<style scoped>
.demo {
background-color: orange;
height: 150px;
width: 210px;
}
</style>
کد مثال اول
کد
اگر این مقاله را مفید می دانید، شاید بتوانید ماشین حساب من را با قیمت 0.99 دلار بخرید؟ این یک ماشین حساب است که می تواند طرح را تغییر دهد. بنابراین شما فقط می توانید دکمه هایی را که ترجیح می دهید نگه دارید. -> App Store
