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>

实现效果为:

相关文章
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
1201 5
|
Web App开发 JavaScript 前端开发
JS字符串补全方法padStart()和padEnd()简介
JS字符串补全方法padStart()和padEnd()简介
1247 6
|
前端开发 UED 开发者
React 日期选择器 Date Picker
本文从React的角度探讨了日期选择器的使用方法,包括使用`react-datepicker`库的基本配置、自定义样式、国际化设置、常见问题及解决方案,旨在帮助开发者构建用户友好的日期选择组件。
533 12
Echarts中横坐标文字显示不全
本文讨论了在ECharts中横坐标文字显示不全的问题,并通过设置`xAxis`的`axisLabel.interval`属性为`0`来解决。这样设置后,横坐标上的所有标签都会显示,而不会根据自动计算的间隔来显示部分标签。文章提供了问题的具体示例图片和解决方法,并附有官方文档链接。
1657 4
Echarts中横坐标文字显示不全
|
存储 缓存 编解码
electron:获取MAC地址
electron:获取MAC地址
910 0
|
JavaScript 前端开发
JS常用数据类型转换(数字型和字符串型之间转换)
JS常用数据类型转换(数字型和字符串型之间转换)
577 2
|
存储 安全 Linux
linux中使用Postfix和Dovecot搭建邮箱系统服务
Postfix是一个开源的邮件传输代理(MTA),用于路由和传送电子邮件。它是一个可靠、安全且高性能的邮件服务器软件,常用于搭建邮件系统的核心组件之一。 Dovecot是一个开源的邮件服务软件,用于提供邮件访问服务,包括POP3和IMAP协议。它通常与Postfix配合使用,用于接收和存储邮件,以及为用户提供远程访问邮件的功能。
2676 3
 linux中使用Postfix和Dovecot搭建邮箱系统服务
|
开发框架 前端开发 JavaScript
现代前端开发中的跨平台解决方案比较与应用
在现代软件开发中,跨平台解决方案成为了开发者们的热门话题。本文将探讨几种主流的跨平台开发框架及其特点,重点比较它们在前端开发中的应用场景和优劣势。通过对比分析,读者可以更好地理解如何选择适合自己项目需求的跨平台解决方案。
|
JavaScript 安全 前端开发
JS禁止查看网页源代码的简单实现方法
JS禁止查看网页源代码的简单实现方法
1367 89
|
移动开发 JavaScript 前端开发
用js来实现页面全屏和退出全屏的功能
用js来实现页面全屏和退出全屏的功能

热门文章

最新文章

下一篇
开通oss服务