CSS实现五角星

简介: CSS实现五角星

今天,我们利用CSS实现五角星形状。具体代码如下:


<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>CSS基本形状——五角星</title>  <style type="text/css">    * {      margin:40px;      padding:0px;    }    .star {        width: 0;        height: 0;        border-left: 80px solid transparent;        border-right: 80px solid transparent;        border-top: 50px solid red;        position: relative;    }    .star::before {        content: "";        width: 0;        height: 0em;        border-left: 80px solid transparent;        border-right: 80px solid transparent;        border-top: 50px solid red;        transform: rotate(72deg);        position: absolute;        left: -80px;        top: -50px;    }    .star::after {        content: "";        width: 0;        height: 0em;        border-left: 80px solid transparent;        border-right: 80px solid transparent;        border-top: 50px solid red;        transform: rotate(-73deg);        position: absolute;        left: -80px;        top: -50px;    }</style></head><body>  <div class="star"></div></body></html>

实现效果为:

相关文章
|
JavaScript
有关vue转换时间为年月日格式
有关vue转换时间为年月日格式
351 1
|
SQL 开发框架 .NET
分享123个ASP整站程序源码,总有一款适合您
分享123个ASP整站程序源码,总有一款适合您
602 0
element-plus:el-date-picker日期只选择年月不要日
element-plus:el-date-picker日期只选择年月不要日
1483 0
|
移动开发 缓存 监控
面试官:本机号码一键登录,是怎么实现的?
面试官:本机号码一键登录,是怎么实现的?
2470 0
面试官:本机号码一键登录,是怎么实现的?
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
Vue3报错:Extraneous non-props attributes (style) were passed to component but could not be automatical
4798 1
|
缓存 JavaScript
请问如何在 keep-alive 组件中设置缓存的最大数量和过期时间
请问如何在 keep-alive 组件中设置缓存的最大数量和过期时间
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
933 5
|
定位技术 开发工具 数据安全/隐私保护
GIS数据格式坐标转换(地球坐标WGS84、GCJ-02、火星坐标、百度坐标BD-09、国家大地坐标系CGCS2000)
GIS数据格式坐标转换(地球坐标WGS84、GCJ-02、火星坐标、百度坐标BD-09、国家大地坐标系CGCS2000)
4505 1
|
资源调度 前端开发 JavaScript
安利一款基于canvas/svg的富文本编辑器-支持在线导出PDF、DOCX
高性能:利用Canvas和SVG进行图形和矢量图形的渲染,提供高性能的绘图能力。 可扩展性:Canvas-Editor是一个开源项目,支持通过插件机制扩展编辑器的功能,如DOCX、PDF导出、表格分页等。 丰富的文本编辑功能:支持多种文本编辑操作,如插入表格、分页、性能优化等。
1422 0
|
数据可视化 定位技术
【threejs】可视化大屏酷炫3D地图附源码
【threejs】可视化大屏酷炫3D地图附源码
10851 130
【threejs】可视化大屏酷炫3D地图附源码