Тест

Сейчас мы попробуем создать простой набор фигур, которые можно сделать с помощью CSS.

Круг

Поле HTML

Чтобы создать круг в CSS, нам нужен всего лишь один DIV. В нашем примере мы еще указали для него ID, чтобы определить для него стили.

 

Поле CSS

CSS очень простой, указываем ширину и высоту, а затем задаем ему border-radius равный половине ширины и высоты.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

Квадрат

Поле HTML

Чтобы создать квадрат в CSS, нам так же, как и для круга, нужен один DIV с идентификатором.

 

Поле CSS

CSS в данном случае еще проще, просто указываем равную ширину и высоту.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

Звезда

Поле HTML

Для того чтобы создать форму звезды с помощью CSS понадобится также один DIV.

 

Поле CSS

Создание звездочки – это также манипуляция с границами блока и с использованием значения rotate свойства transform. См. код ниже.

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);  
}

Разобрать пример вы можете ниже:

100%

			          html
			        

			          css