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>

实现效果为:

相关文章
|
JSON JavaScript 前端开发
vue如何获取Elementui Tree 树形控件当前选中的节点
vue如何获取Elementui Tree 树形控件当前选中的节点
383 0
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
1119 5
|
Web App开发 JavaScript 前端开发
JS字符串补全方法padStart()和padEnd()简介
JS字符串补全方法padStart()和padEnd()简介
1195 6
|
JavaScript 前端开发
JS常用数据类型转换(数字型和字符串型之间转换)
JS常用数据类型转换(数字型和字符串型之间转换)
545 2
|
JavaScript 前端开发 安全
js中?.、??、??=的用法及使用场景
【8月更文挑战第8天】 js中?.、??、??=的用法及使用场景
3815 1
|
存储 安全 Linux
linux中使用Postfix和Dovecot搭建邮箱系统服务
Postfix是一个开源的邮件传输代理(MTA),用于路由和传送电子邮件。它是一个可靠、安全且高性能的邮件服务器软件,常用于搭建邮件系统的核心组件之一。 Dovecot是一个开源的邮件服务软件,用于提供邮件访问服务,包括POP3和IMAP协议。它通常与Postfix配合使用,用于接收和存储邮件,以及为用户提供远程访问邮件的功能。
2535 3
 linux中使用Postfix和Dovecot搭建邮箱系统服务
|
开发框架 前端开发 JavaScript
现代前端开发中的跨平台解决方案比较与应用
在现代软件开发中,跨平台解决方案成为了开发者们的热门话题。本文将探讨几种主流的跨平台开发框架及其特点,重点比较它们在前端开发中的应用场景和优劣势。通过对比分析,读者可以更好地理解如何选择适合自己项目需求的跨平台解决方案。
|
JavaScript 安全 前端开发
JS禁止查看网页源代码的简单实现方法
JS禁止查看网页源代码的简单实现方法
1304 89
|
移动开发 JavaScript 前端开发
用js来实现页面全屏和退出全屏的功能
用js来实现页面全屏和退出全屏的功能
|
容器
css3卡片前后无限循环翻转效果
css3卡片前后无限循环翻转效果
345 0

热门文章

最新文章