CSS中怎么做星星?/* 第一种方法:使用伪元素 */ .star { position: relative; width: 0; height: 0; border-left: 16px solid
CSS中怎么做星星?
/* 第一种方法:使用伪元素 */ .star { position: relative; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 32px solid #FFD700; } .star::before, .star::after { content: '; position: absolute; top: 11px; left: -16px; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 32px solid #FFD700; transform: rotate(-35deg); } .star::after { left: 16px; transform: rotate(35deg); } /* 第二种方法:使用transform */ .star { position: relative; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 32px solid #FFD700; transform: rotate(35deg) skew(10deg); transform-origin: bottom center; } /* 第三种方法:使用SVG */ .star svg { fill: #FFD700; }
以上是制作星星的三种方法,分别使用了伪元素、transform以及SVG。可以根据实际情况选择合适的方法。
粉丝
0
关注
0
收藏
0