html - CSS 的形状 - 星星。这个怎么运作?

原文 标签 html css css-shapes

enter image description here

以下是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>

最佳答案

这可能是一个更好的可视化

#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>


使用 CSS 边框制作的 3 个三 Angular 形,它们被旋转到一个星星的位置。

其他两个三 Angular 形只是五星 div 的前后伪元素。

关于html - CSS 的形状 - 星星。这个怎么运作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42270570/

相关文章:

html - 将div以固定高度居中

javascript - jQuery Mobile不将用户输入检查项的样式设置为与列表的其余部分相同

html - 交通信号灯的CSS形状

java - 如何使用Java将HTML表单中的日期存储到数据库中?

javascript - 获取用户在区域中选择的所有文本节点

css - 第n个 child 漂浮在列中

css - 仅在IE8中呈现图像问题

html - CSS3 IE9 点击伪元素?

html - 如何创建带有图标和边框的自适应菱形div?

css3 - CSS圆形加载器