【2-13 五角星】注意记住transform等属性，border用一个角做五角星就行了。

【2-13 五角星】注意记住transform等属性，border用一个角做五角星就行了。

================  方法一  最优解法 ====================

相关代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box{
            width: 300px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }
        .box .triangel{
            width: 0;
            height: 0;
            border: 18px solid transparent;
            border-top:12px solid rgb(255, 255, 0);
            position: relative;
            transform: rotate(0deg);
           
        }
        .box .triangel::before{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top:-21px;
            left:-23px ;   
            border: 18px solid transparent;
            border-right:12px solid rgb(255, 255, 0);
            transform: rotate(-20deg);
        }
        .box .triangel::after{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top:-21px;
            left: -7px;
            border: 18px solid transparent;
            border-left:12px solid rgb(255, 255, 0);
            transform: rotate(20deg); 
        }
        .box .triangel:nth-child(1){
            transform: scale(1.2) translateX(20px) translateY(30px);
        }
        .box .triangel:nth-child(2){
            transform: scale(0.5) rotate(15deg)  translateX(118px) translateY(-80px);
        }
        .box .triangel:nth-child(3){
            transform: scale(0.5) rotate(15deg)  translateX(131px) translateY(-32px);
        }
        .box .triangel:nth-child(4){
            transform: scale(0.5) rotate(38deg) translateX(51px) translateY(-215px);
        }
        .box .triangel:nth-child(5){
            transform: scale(0.5) translateX(177px) translateY(-148px)
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="triangel "></div>
        <div class="triangel "></div>
        <div class="triangel "></div>
        <div class="triangel "></div>
        <div class="triangel "></div>
    </div>
</body>
</html>

问题描述：

Q1: 老师麻烦问下这里的content是什么意思？

相关截图：

https://img1.sycdn.imooc.com//climg/619b997009a2949208120800.jpg





================  方法二  ====================


方法2：没有看提示直接做的。

五角星在iconfont上面找的svg，旋转用的rotate，距离用的padding

svg相关知识：

改大小在width，height中改；颜色用fill，不知道为什么暂时先记住

https://www.it1352.com/1859692.html

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.star{
width: 900px;
height: 600px;
background: red;
position:relative;
}
.star div .icon{
fill:yellow;           /* svg更改颜色，用的fill。不知道什么原理，先记住吧。 */
}
.star div:nth-child(1){      /*  这里不是.star:nth-child(1)，类比p:nth-child()  */
position:absolute;
top:80px;
left: 50px;
}
.star div:nth-child(2){
position:absolute;
top: 10px;
left: 180px;
transform:rotate(-72deg);
}
.star div:nth-child(3){
position:absolute;
top: 70px;
left: 220px;
transform:rotate(-36deg);
}
.star div:nth-child(4){
position:absolute;
top: 150px;
left: 220px;
transform:rotate(0deg);
}
.star div:nth-child(5){
position:absolute;
top: 220px;
left: 180px;
transform:rotate(36deg);
}
</style>
</head>
<body>
<div class="star">
<div><svg t="1637583341029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2534" width="120" height="120"><path d="M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z" p-id="2535"></path></svg></div>
<div><svg t="1637583341029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2534" width="60" height="60"><path d="M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z" p-id="2535"></path></svg></div>
<div><svg t="1637583341029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2534" width="60" height="60"><path d="M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z" p-id="2535"></path></svg></div>
<div><svg t="1637583341029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2534" width="60" height="60"><path d="M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z" p-id="2535"></path></svg></div>
<div><svg t="1637583341029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2534" width="60" height="60"><path d="M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z" p-id="2535"></path></svg></div>
</div>
</body>
</html>


其他思考：

  1. 五角星的制作，可以用3个3角形

    https://jingyan.baidu.com/article/066074d6399828c3c31cb047.html

  • 1）https://img1.sycdn.imooc.com//climg/619b9a4e094aee0e05560416.jpg

  • 2）不一定能形成五角星https://img1.sycdn.imooc.com//climg/619b9cea0952463304960496.jpg

中心旋转对称

https://blog.csdn.net/u010234868/article/details/115434647

  • 相关截图：

        https://img1.sycdn.imooc.com//climg/619b9a18090dbd1805910734.jpg        


【总结】：

1. 复习下::before ::after content:""的知识点

2. 五角星用一个角就行，不一定要用两个角

3. 只做记录，不用回复
easyschen 2021-11-22
源自：2D与3D转换   2-13 编程练习
16
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕小李 回答被采纳获得+3积分 2021-11-23 10:11:57

同学你好，解答如下：

Q1: 老师麻烦问下这里的content是什么意思？

答：content是把生成的内容插入到标签中，那么content能插入什么呢？看下图：

https://img1.sycdn.imooc.com//climg/619c4d9d09ca86ef07960736.jpg

https://img1.sycdn.imooc.com//climg/619c4da7095a712604420176.jpg

同学如果想了解的更深入，以下链接中有关于伪类中的content属性介绍。

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

方法二中的svg中fill这个属性是给svg（矢量图）进行填充。

同学学习劲头很足，这样很棒。

如果同学要做笔记的话可以用以下方法哦~

https://img1.sycdn.imooc.com//climg/619c4dcb09ad9df006240571.jpg

https://img1.sycdn.imooc.com//climg/619c4de109c56b7416720530.jpg

祝学习愉快~

0
收起回答
  • easyschen 提问者 #1
    好的收到，辛苦老师了。


    2021-11-23 10:27:52
  • easyschen 提问者 #2

    记录：这里还是用的3个三角形，层叠之后组成五角星

    https://img1.sycdn.imooc.com//climg/619c6d0009c3631102720212.jpghttps://img1.sycdn.imooc.com//climg/619c6d1f094e122d06260320.jpg




    2021-11-23 12:25:38
  • easyschen 提问者 #3

    注意：这里还是用的3个三角形，层叠组成五角星

    https://img1.sycdn.imooc.com//climg/619c6d9609b72ff402720212.jpg

    https://img1.sycdn.imooc.com//climg/619c6d1f094e122d06260320.jpg

    2021-11-23 12:27:18
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

五角星画图
156 0 6
控制五角星问题
70 1 6
老师五角星图案怎么弄？
26 1 4
2-7五角星的那五个角怎么确定到36度？
49 0 3
绘制五角星并设置位置的思路还是很乱的？
2 0 2

登录后可查看更多问答，登录/注册

前端工程师2020
  • 参与学习           人
  • 提交作业       7872    份
  • 解答问题       15282    个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

了解课程

本课精华内容

问答 作业

老师，我在xhr.send()出错了

92 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师