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

Sharing is caring!

طريقة عمل زوايا منحنية لجدول بواسطة 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 للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.