لرسم المثلث أنشئ عنصر كتلي بارتفاع وعرض صفر، ويُرسم الشكل باستخدام الإطارات. لرسم الدائرة أنشئ عنصر كتلة بارتفاع وعرض متساويين، ومن ثم حدد قيمة الخاص
رسم الأشكال في CSS
رسم شبه المنحرف (Trapezoid)
لرسم شكل شبه المنحرف، أنشئ عنصر كتلي بارتفاع صفر، وعرض أكبر من الصفر، وإطار شفاف لجميع الأوجه عدا وجه واحد.
- ملف HTML
- ملف CSS
<divclass="trapezoid"></div>
.trapezoid {
width:50px;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid black;
}
رسم المثلثات (Triangles)
لرسم المثلث أنشئ عنصر كتلي بارتفاع وعرض صفر، ويُرسم الشكل باستخدام الإطارات.
رأس المثلث إلى اعلي1
- ملف HTML
- ملف CSS
<div class="triangle-up"></div>
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid rgb(246, 156, 85);
}
رأس المثلث إلى أسفل2
- ملف HTML
- ملف CSS
<div class="triangle-down"></div>
.triangle-down {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid rgb(246, 156, 85);
}
رأس المثلث إلى اليسار3
- ملف HTML
- ملف CSS
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 50px solid rgb(246, 156, 85);
}
رأس المثلث إلى اليمين4
- ملف HTML
- ملف CSS
<div class="triangle-right"></div>
.triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 50px solid rgb(246, 156, 85);
}
المثلث يشير إلى أعلى اليمين 5
- ملف HTML
- ملف CSS
<div class="triangle-up-right"></div>
.triangle-up-right {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
border-left: 50px solid transparent;
}
المثلث يشير إلى أعلى اليسار 6
- ملف HTML
- ملف CSS
<div class="triangle-up-left"></div>
.triangle-up-left {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
border-right: 50px solid transparent;
}
المثلث يشير إلى أسفل اليمين 7
- ملف HTML
- ملف CSS
<div class="triangle-down-right"></div>
.triangle-down-right {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
border-left: 50px solid transparent;
}
المثلث يشير إلى أسفل اليسار 8
- ملف HTML
- ملف CSS
<div class="triangle-down-left"></div>
.triangle-down-left {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
border-right: 50px solid transparent;
}
رسم الدائرة
لرسم الدائرة أنشئ عنصر كتلة بارتفاع وعرض متساويين، ومن ثم حدد قيمة الخاصية border-radius لتكون 50%.
الدائرة 1
- ملف HTML
- ملف CSS
<div class="circle"></div>
.circle {
width: 50px;
height: 50px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
الشكل البيضاوي 1
لرسم الشكل البيضاوي أنشئ عنصر كتلة بارتفاع وعرض مختلفين، ومن ثم حدد قيمة الخاصية border-radius لتكون 50%.
- ملف HTML
- ملف CSS
<div class="oval"></div>
.oval {
width: 50px;
height: 80px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
انفجار بثماني نقاط 3
- ملف HTML
- ملف CSS
<div class="burst-8"></div>
.burst-8 {
background: rgb(246, 156, 85);
width: 40px;
height: 40px;
position: relative;
text-align: center;
-ms-transform: rotate(20deg);
transform: rotate(20eg);
}
.burst-8::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
انفجار باثنتي عشر نقطة 4
- ملف HTML
- ملف CSS
<div class="burst-12"></div>
burst-12 {
width: 40px;
height: 40px;
position: relative;
text-align: center;
background: rgb(246, 156, 85);
}
.burst-12::before, .burst-12::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
}
.burst-12::before {
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.burst-12::after {
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
رسم المربع
لرسم مربع انشئ عنصر كتلة بارتفاع وعرض متساويين.
رسم المربع1
- ملف HTML
- ملف CSS
<div class="square"></div>
.square {
width: 100px;
height: 100px;
background: rgb(246, 156, 85);
}
رسم المكعب1
تستخدم خصائص التحويلات ثنائية الأبعاد skewX() و skewY() على العناصر الزائفة لرسم المكعب.
- ملف HTML
- ملف CSS
<div class="cube"></div>
.cube {
background: #dc2e2e;
width: 100px;
height: 100px;
position: relative;
margin: 50px;
}
.cube::before {
content: '';
display: inline-block;
background: #f15757;
width: 100px;
height: 20px;
transform: skewX(-40deg);
position: absolute;
top: -20px;
left: 8px;
}
.cube::after {
content: '';
display: inline-block;
background: #9e1515;
width: 16px;
height: 100px;
transform: skewY(-50deg);
position: absolute;
top: -10px;
left: 100%;
}
رسم الهرم
تستخدم الإطارات مع التحويلات ثنائية الأبعاد skewY() و rotate() على العناصر الزائفة لرسم شكل الهرم.
رسم الهرم1
- ملف HTML
- ملف CSS
<div class="pyramid"></div>
.pyramid {
width: 100px;
height: 200px;
position: relative;
margin: 50px;
}
.pyramid::before,.pyramid::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border: 50px solid;
position: absolute;
}
.pyramid::before {
border-color: transparent transparent #ff5656 transparent;
transform: scaleY(2) skewY(-40deg) rotate(45deg);
}
.pyramid::after {
border-color: transparent transparent #d64444 transparent;
transform: scaleY(2) skewY(40deg) rotate(-45deg);
}
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS