Әртүрлі геометриялық пішіндерді CSS -те салу

Тақырып бойынша 17 материал табылды

Әртүрлі геометриялық пішіндерді CSS -те салу

Материал туралы қысқаша түсінік

• CSS тілінде әртүрлі геометриялық фигураларды салу.

Материалдың қысқаша нұсқасы

Тақырыбы: Әртүрлі геометриялық пішіндерді CSS -те салу

Жоспар:

CSS тілінде әртүрлі геометриялық фигураларды салу.

1-мысал. CSS бағдарламасында әртүрлі геометриялық пішіндерді салу. Геометриялық фигураларды CSS-те салу

Ш аршыны салу
Шаршыны сызу үшін ең алдымен html де div тегін square атаулы идентификаторын жазып аламыз. Яғни, одан кейін css те square (ағылшын тілінен «шаршы») идентификаторына арнайы ережелерді жазамыз. Олар келесідей: <div id="square"></div>

#square{width: 100px; height: 100px; background: green;}

Т өртбұрышты салу
<div id="rectangle"></div>

Енді css ережелерін енгіземіз.

#rectangle{width: 200px; height: 80px; background: green;}

Д өңгелекті салу
<div id="circle"></div>

#circle{width: 100px; height: 100px; background: green; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;}

Э ллипсті салу
<div id="ellips"></div>

#ellips{width: 150px; height: 70px; background: green; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;}

Параллелграммды салу

#parallelogram{width: 150px; height: 70px; background: green; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform:

skew(20deg);}

Ү шбұрышты салу
<div id="triangle-up"></div>

#triangle-up{width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green;}

Т рапецияны салу
<div id="trapezoid"></div>

#trapezoid{width: 100px; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green;}

Ж ұлдыз (6 қырлы)
<div id="star-six"></div>

#star-six{width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; position: relative;}

#star-six:after{width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid green; position: absolute; content: ""; top: 30px; left: -50px;}

9-мысал. Геометриялық фигруларды CSS тілінде құру керек.

Толық кодын төменде келтіріп көрсетейін:

<html>

<head>

<title>Геометриялық пішіндер</title>

<style>

#wrap{width: 400px;margin: 0 auto;}

#square{width: 100px; height: 100px; background: green;}

#rectangle{width: 200px; height: 80px; background: green;}

#circle{width: 100px; height: 100px; background: green; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;}

#ellips{width: 150px; height: 70px; background: green; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;}

#parallelogram{width: 150px; height: 70px; background: green; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg);}

#triangle-up{width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green;}

#triangle-down{width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid green;}

#triangle-left{width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid green;}

#triangle-right{width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid green;}

#trapezoid{width: 100px; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green;}

#star-six{width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; position: relative;}

</style>

<div id="wrap"><center>CSS те әртүрлі геометриялық пішіндерді салу</center>

1. Шаршы <div id="square"></div>

2. Төртбұрыш<div id="rectangle"></div>

3. Дөңгелек<div id="circle"></div>

4. Эллипс<div id="ellips"></div>

5. Параллелграмм <div id="parallelogram"></div>

6. Жоғары қараған үшбұрыш <div id="triangle-up"></div>

7. Төмен қараған үшбұрыш<div id="triangle-down"></div>

8. Солға қараған үшбұрыш<div id="triangle-left"></div>

9. Оңға қараған үшбұрыш<div id="triangle-right"></div>

10. Трапеция<div id="trapezoid"></div>

11. Жұлдыз (6 қырлы)<div id="star-six"></div> </div>

2.21-сурет. Геометриялық фигураларды CSS-те салу

2-мысал. Енді hover. стильде оқиғаны сипаттаймыз: тінтуір меңзері суреттердің біріне қойылған кезде оның мөлдірлігі 1-ге тең болады, ал жүгіргі бөлінген кезде-opacity атрибутының мәні: 0.4 тең болады. Сонымен қатар, мысалы, класс көмегімен суреттің айналасындағы шеңбердің қалыңдығы мен түсі болады

<style>

img.apple {

width: 120px;

height: 120px;

opacity:0.4;

border: 4px solid Green;

}

img.apple:hover {

opacity:1;

border: 4px solid Green;

}

img.tomato {

width: 120px;

height: 120px;

opacity:0.4;

border: 4px solid Red;

}

img.tomato:hover {

opacity:1;

border: 4px solid Red;

}

img.pear {

width: 120px;

height: 120px;

opacity:0.4;

border: 4px solid Yellow;

}

img.pear:hover {

opacity:1;

border: 4px solid Yellow;

}

img.orange {

width: 120px;

height: 120px;

opacity:0.4;

border: 4px solid Orange;

}

img.orange:hover {

opacity:1;

border: 4px solid Orange;

}

</style>

<table>

<tr>

<td align="center">Помидор</td>

<td align="center">Алмұрт</td>

<td align="center">Апельсин</td>

</tr>

<tr>

</tr>

</table>

2.22-сурет. Тінтуір меңзері суреттердің біріне қойылған кезде оның мөлдірлігі 0,4-ге тең болған кездегі нәтижесі

Тінтуір меңзері суреттердің біріне қойылған кезде оның мөлдірлігі 1-ге тең болған кездегі нәтижесін шығару керек.

<style>

img.apple {

width: 120px;

height: 120px;

opacity:0.4;

border: 4px solid Green;

}

img.apple:hover {

opacity:1;

border: 4px solid Green;

}

img.tomato {

width: 120px;

height: 120px;

opacity:0.4;

border: 4px solid Red;

}

img.tomato:hover {

opacity:1;

border: 4px solid Red;

}

img.pear {

width: 120px;

height: 120px;

opacity:0.4;

border: 4px solid Yellow;

}

img.pear:hover {

opacity:1;

border: 4px solid Yellow;

}

img.orange {

width: 120px;

height: 120px;

opacity:0.4;

border: 4px solid Orange;

}

img.orange:hover {

opacity:1;

border: 4px solid Orange;

}

</style>

<table>

<tr>

<td align="center">Помидор</td>

<td align="center">Алмұрт</td>

<td align="center">Апельсин</td>

</tr>

<tr>

<td><img src="images/orange.jpeg"

class="orange"/></td>

</tr>

</table>

2.23-сурет. Тінтуір меңзері суреттердің біріне қойылған кезде оның мөлдірлігі 1-ге тең болған кездегі нәтижесі

Өзіндік жұмысқа арналған жеке тапсырмалар:

CSS-те келесідей фигураларды жасаңыз:

Алтыбұрыш
Жүрек
Жұмыртқа
Шексіздік белгісі
Түсініктеме үшін
Pacman
Бағыттауыш
Сегізбұрыш
Инь-ян символы
Төбесі бар үйшік
Сегмент
Лупа

Бақылау сұрақтары:

CSS-те қандай геометриялық фигураларды орындауға болады?
Дөңгелек пен эллипсті салудың арасындағы айырмашылық неде?
Алтыбұрышты қалай саламыз?
Шексіздік белгісінің коды қандай?

Жүктеу

Бөлісу

ЖИ арқылы жасау

Файл форматы:

docx

Барлық пәндер Басқа Басқа

06.02.2026

Жүктеу

ЖИ арқылы жасау

Жариялаған:

Алибекова Назира Паридиновна

Бұл материалды қолданушы жариялаған. Ustaz Tilegi ақпаратты жеткізуші ғана болып табылады. Жарияланған материалдың мазмұны мен авторлық құқық толықтай автордың жауапкершілігінде. Егер материал авторлық құқықты бұзады немесе сайттан алынуы тиіс деп есептесеңіз,
шағым қалдыра аласыз

Әртүрлі геометриялық пішіндерді CSS -те салу

Әртүрлі геометриялық пішіндерді CSS -те салу

Химия пәні

Тарих пәні

Биология пәні

Ағылшын тілі пәні

География пәні

Информатика пәні

Мектепке дейінгі білім беру

«Қазақ тілі» жəне «Қазақ əдебиеті»

Дене шынықтыру

Білім алушылардың білім сапасын арттыру

Инклюзивті білім беру