css中怎么做星星

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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。可以根据实际情况选择合适的方法。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么做星星

粉丝

0

关注

0

收藏

0

已有0次打赏