CSS3之绘制五角星

最新推荐文章于 2023-08-10 11:19:29 发布
最新推荐文章于 2023-08-10 11:19:29 发布
阅读量527 收藏 3
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45614713/article/details/105120331
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方形1</title>
    <style>
        #l_f{
            top:100px;
            left:100px;
            margin: 50px 0;
            position: relative;
            display: block;
            width: 0px;
            height: 0px;
            border-left: 50px solid yellow;
            border-top: 50px solid royalblue;
            border-right: 50px solid white;
            border-bottom:50px solid black ;
            transform: rotate(45deg);

        }
        #l_f:before{
            position: absolute;
            display: block;
            content: " ";
            width: 0;
            height: 0;
            top:50px;
            left: -50px;
            border-left:50px solid transparent;
            border-top:50px solid purple;
            border-right:50px solid transparent;
            border-bottom:50px solid transparent;
        }
        #l_f:after{
            position: absolute;
            display: block;
            content: " ";
            width: 0;
            height: 0;
            left: 50px;
            top:-50px;
            border-left:50px solid dodgerblue;
            border-top:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:50px solid transparent;
        }
        #l_t{
            width: 0;
            height: 0;
            border-left:50px solid transparent;
            border-top:50px solid transparent;
            border-right:50px solid limegreen;
            border-bottom:50px solid transparent;
            transform:rotate(45deg) translate(-65px,-106px);
        }
        #r_t{
            width: 0;
            height: 0;
            border-left:50px solid transparent;
            border-top:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:50px solid red;
            transform:rotate(45deg) translate(-36px,-276px);
        }
    </style>
</head>
<body>
<!--transform 和伪元素 ::before /after -->
<div>
    <div id="l_f"></div>
    <div id="l_t"></div>
    <div id="r_t"></div>
</div>
</body>
</html>

效果图：在这里插入图片描述

Volcano_WQL
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html网页中加五角星,使用css3在网页中实现五角星样式（原理解析）
weixin_42122432的博客
05-31 912
本篇文章给大家带来的内容是关于使用css3在网页中实现五角星样式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我们平时在web网页中看到的各种图形包括正方形，长方形，三角形，圆形等，大部分是使用css3或者背景图片来实现的，但是在开发的过程中，使用背景图片的截取有着很多的不足，比如图片需要占用额外的请求，对图片像素要求较高等，所以当下css3成为比较主流的实现方法。现在我们通过画...
五角星
02-12
适用于Azure Pipelines的示例ASP.NET Core应用程序 有关如何为此存储库设置管道的信息，请参阅。 有关构建.NET Core应用程序的更多信息，请参见 。 贡献 该项目欢迎您的贡献和建议。 大多数捐款要求您同意“捐款者许可协议”（CLA），声明您有权并实际上授予我们使用您的捐款的权利。 有关详细信息，请访问 。 当您提交拉取请求时，CLA机器人会自动确定您是否需要提供CLA并适当地装饰PR（例如，标签，注释）。 只需按照机器人提供的说明进行操作即可。 您只需使用我们的CLA在所有存储库中执行一次即可。 该项目采用了。 有关更多信息，请参见或与联系，并提出其他任何问题或意见。 法律声明 Microsoft和任何贡献者向您授予Microsoft文档和此库中的其他内容的，位于，请参阅文件，并向您授予下的存储库中任何代码的，请参阅文件。 本文档中引用的Microsoft
html css画五角星,css画梯形，css画五角星， css画六角星 ，css画六边形
weixin_35262577的博客
06-17 215
css画梯形，css画五角星， css画六角星 ，css画六边形css画梯形.triangle {border-bottom: 100px solid #F36823;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0px;width: 100px;}css画五角星.triangle{...
Css3之画五角星跟六角星
Allen-Ye博客
08-21 1096
今天我们就用css3来画五角星跟六角星，里面用到了css3的伪元素还有三角形组合起来的 五角星 分三部分，两个钝角三角形在下面叠加在一起，上面一个三角形 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五角星和六角星</title> <...
css3五角星绘制,如何用CSS3画五角星
weixin_35120608的博客
08-04 311
满意答案aa0151512017.06.26采纳率：48%等级：9已帮助：214人#star-five{margin:60px0;position:relative;display:block;color:red;width:0px;height:0px;border-right:100pxsolidtransparent;border-bottom:70px...
css绘制星星闪烁,CSS3 闪烁的星星
weixin_33481022的博客
08-03 654
CSS语言：CSSSCSS确定body {background: black;}.shine {background-image: url(/uploads/150601/shine.png);background-repeat: no-repeat;background-position: center;width: 155px;height: 155px;position: absolute;...
CSS绘制五角星
10-26
纯CSS绘制五角星、六角形、五边形、六边形、心形
canvas 绘制五角星红旗
08-24
用canvas 画了五个五角星~~
使用CSS绘制星级评分效果的方法
01-19
先来看一下CSS绘制五角星的基本方法： CSS Code复制内容到剪贴板 #star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right:...
HTML5五角星探照灯文字效果.zip
07-04
HTML5五角星探照灯文字效果是一款HTML5基于canvas绘制五角星形状的探照灯文字，通过自动放大缩小显示区域效果。
css3逼真的美盾效果.zip
07-11
css3 filter滤镜属性绘制美国队长盾牌标，五角星标志，盾牌元素样式。
如何使用纯CSS3创建一个简单的五角星图形
陈小峰（iefreer）的专栏
02-22 1万+
我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。使用CSS3是最为简单和高效的方法，并且代码容易调试和维护。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单。
css3画五角星
luo15256533579的博客
11-26 3748
效果如下： 实现： Document div{ width: 0; height: 0; border-left: 100px solid transparent; border-bottom: 70px solid red; border-right: 100px solid transparent; transform: ro
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
热门推荐
编程之家
08-29 5万+
CSS实现常用效果附源码和结果图，圆角，三角，爱心，五角星，六边形，12角星，无穷大，钻石，八边形，鸡蛋，八卦等等例子
css3 五角星圆形导航
xiyan_yuan的博客
09-17 624
html<div class="header"> <div class="starte">start</div> <ul> <li class="w">one</li> <li class="w">two</li> <li class="w">three</li> <li
CSS3制作各种形状图像
weixin_34124939的博客
11-23 3795
制作圆形： 要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID <div id="circle"></div> 圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可： #circle { width: 120px; heig...
css中五角星,CSS3五角星
weixin_35319943的博客
08-04 262
CSS语言：CSSSCSS确定#pentagram{width: 0;height: 0;color: #ccc;margin: 150px 150px;position: relative;display: block;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom:...
css3绘制常见的30种形状（心形,五角星,六边形,钻石,对话框,阴阳鱼图等）
boy火巨的博客
03-12 3190
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等 新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子 长方形 #Rectangle{ width: 200px; height: 50px; ...
用css画五角星
最新发布
rose999ying的博客
08-10 1350
css技巧
使用 html 和 css 绘制一个五角星
06-08
好的，以下是使用 HTML 和 CSS 绘制一个五角星的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Five-Pointed Star</title> <style> .star { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 35px solid #FDB813; border-left: 50px solid transparent; transform: rotate(35deg); position: absolute; top: 50%; left: 50%; margin-top: -17.5px; margin-left: -25px; } .star::before { content: ""; width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 17px solid #FDB813; border-left: 50px solid transparent; position: absolute; top: -17px; left: -50px; transform: rotate(-35deg); } </style> </head> <body> <div class="star"></div> </body> </html> ``` 这里我们使用了 `::before` 伪元素来绘制五角星的上半部分，然后使用 transform 属性进行旋转和定位。你可以将颜色和大小等属性进行调整，以适应你的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值