طريقة عمل زوايا منحنية لجدول بواسطة css

الكود الخاص بالجدول :

<div>
<!– Corners –>
<div>
<div>
&bull;
</div>
</div>
<div>
<div>
&bull;
</div>
</div>
<div>
<div>
&bull;
</div>
</div>
<div>
<div>
&bull;
</div>
</div>
<!– Content –>
<div>
Contents go here, but it must be at least
two lines to look any good.
</div> <!– end div.box-contents –>
</div> <!– end div.rounded-box –>

الـClasses الخاصة بالـ Style Sheet :

div.rounded-box {
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
div.top-left-corner, div.bottom-left-corner,
div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px;
background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside
{position:relative; font-size:150px; font-family:arial;
color:#E6E6E6; line-height: 40px;}
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#000;
}

رؤية مصدر source  المثال من المصدر تساعد أكثر على الفهم

توصل مجانا بجديد مراجع!
إشترك لتحصل على ميزة الوصول لمئات البحوث الجامعية باللغة العربية.
بعض من تصفحوا هذه الصفحة قرأوا أيضا...

اترك تعليقا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.