完全不会写啊。。

完全不会写啊。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 0;
            height: 0;
            border-top: 40px solid yellow;
            border-left: 65px solid transparent;
            border-right: 65px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

老师,您好!一点思路也没有,然后看了其他小伙伴写的,发线他们是其中有一段是这么写的,但是我不是很明白为啥组成了如下的图形。

http://img1.sycdn.imooc.com//climg/5f5b0f7609bdd71607980098.jpg

正在回答

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

2回答

同学你好,每个三角形旋转和平移的角度是计算不了的,需要自己去调试哦。

祝学习愉快!

好帮手慕鹤 2020-09-11 15:30:24

同学你好。实现三角形,主要使用伪类、定位、旋转、放大缩小等属性。这里给同学讲一下五角星的形成。

(1)五角星主要是由几个三角形拼接而成,首先,先通绘制出一个三角形。一个三角形就是把其他角度的边框都设置为transparent,留一个角度的边框颜色即可。

http://img1.sycdn.imooc.com//climg/5f5b21da092bccf105450301.jpg

效果:

http://img1.sycdn.imooc.com//climg/5f5b21cc095e594101790153.jpg

(2)通过伪类元素,再添加一个三角形,然后通过旋转属性,定位属性等方式让它们重叠在一起。

http://img1.sycdn.imooc.com//climg/5f5b2283093c318d06140357.jpg

效果:

http://img1.sycdn.imooc.com//climg/5f5b22ed094e7a1d01880158.jpg

(3)再次添加伪元素添加一个三角形。

http://img1.sycdn.imooc.com//climg/5f5b23ab09a69ba905110356.jpg

效果如图:

http://img1.sycdn.imooc.com//climg/5f5b23c509247a3e02430143.jpg


其它的小三角也是按照这种格式来进行书写的,再通过缩放、旋转、定位等属性来对它进行位置的改变。

如果帮助到了你,欢迎采纳,祝学习愉快!

  • 提问者 CoffeePlayer #1
    每个三角形旋转和平移的角度怎么计算那?还是需要自己试
    2020-10-19 16:23:59
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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