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

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