Формы CSS - звезда. Как это работает?

Question

Ниже приведен код The Shapes of CSS. Здесь я хочу подробно разобраться в свойствах CSS. Как работает форма в CSS? Псевдо CSS, границы и свойства CSS3. Необходимо прояснить некоторые концепции основных свойств CSS.

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

 
} 
 
#star-five:after { 
 
    position: absolute; 
 
    display: block; 
 
    color: red; 
 
    top: 3px; 
 
    left: -105px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 70px solid red; 
 
    border-left: 100px solid transparent; 
 
    -webkit-transform: rotate(-70deg); 
 
    -moz-transform: rotate(-70deg); 
 
    -ms-transform:  rotate(-70deg); 
 
    -o-transform:  rotate(-70deg); 
 
    content: ''; 
 
}

<div id="star-five"></div>

Answer 1

Это может быть лучшей визуализации

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

 
} 
 
#star-five:after { 
 
    position: absolute; 
 
    display: block; 
 
    color: red; 
 
    top: 3px; 
 
    left: -105px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 70px solid green; 
 
    border-left: 100px solid transparent; 
 
    -webkit-transform: rotate(-70deg); 
 
    -moz-transform: rotate(-70deg); 
 
    -ms-transform:  rotate(-70deg); 
 
    -o-transform:  rotate(-70deg); 
 
    content: ''; 
 
}

<div id="star-five"></div>

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

Остальные два треугольника - это только элементы псевдо-звезды «звезда-пять» до/после.

Answer 2

Звезда формируется из трех треугольников, которые перемещаются к правому углу и позиции:

треугольника 1:

#star-five { 
 
    margin: 50px 0; 
 
    position: relative; 
 
    display: block; 
 
    color: red; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 70px solid red; 
 
    border-left: 100px solid transparent; 
 
    -moz-transform: rotate(35deg); 
 
    -webkit-transform: rotate(35deg); 
 
    -ms-transform:  rotate(35deg); 
 
    -o-transform:  rotate(35deg); 
 

 
}

<div id="star-five"></div>

Треугольник 2:

             
  
 
   
 
    
#star-five { 
 
    border-bottom: 80px solid red; 
 
    border-left: 30px solid transparent; 
 
    border-right: 30px solid transparent; 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    top: -45px; 
 
    left: -65px; 
 
    display: block; 
 
    -webkit-transform: rotate(-35deg); 
 
    -moz-transform: rotate(-35deg); 
 
    -ms-transform:  rotate(-35deg); 
 
    -o-transform:  rotate(-35deg); 
 
    }
 
    
<div id="star-five"></div>
 
   
 
  
 
 

 

Треугольник 3:

             
  
 
   
 
    
#star-five { 
 
    position: absolute; 
 
    display: block; 
 
    color: red; 
 
    top: 3px; 
 
    left: -105px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 70px solid red; 
 
    border-left: 100px solid transparent; 
 
    -webkit-transform: rotate(-70deg); 
 
    -moz-transform: rotate(-70deg); 
 
    -ms-transform:  rotate(-70deg); 
 
    -o-transform:  rotate(-70deg); 
 

 
    }
 
    
<div id="star-five"></div>
 
   
 
  
 
 

 

Заготовку content свойство в CSS создает новый div элемент с ничего в нем и с before и after, вы поместите этот элемент до или после того, как вам Вы выбрали.

Answer 3

#star-five { 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid red; 
    border-left: 100px solid transparent; 
} 

Это создает прямоугольник, указывающий вверх, который затем поворачивается на 35 градусов

#star-five:after{} 

является bascically то же это также прямоугольник (такой же размер, как и основной один), но поворачиваются и перемещаются по-разному

#star-five:before{} 

это немного по-другому это меньший прямоугольник (вы можете изменить размер каждого прямоугольника путем изменения каждой границы чащи

border-bottom: 70px solid red; (change 70px here for example) 

потом каждый прямоугольник перемещается в положение, чтобы сформировать звезду , важно, чтобы: до и: после того, как иметь содержание: «»