五星红旗代码问题

五星红旗代码问题

请助教老师帮忙看一下我编写的程序是否有问题!!!

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>2-3</title>

    <style type="text/css">

        .backgroundOne{

            width:300px;

            height:200px;

            background-color:#f00;

            margin: 0 auto;

        }

        .jiao{

            width: 0px;

            height: 0px;

            margin: 0 100px;

            position: relative;

            display: block;

            color: #ff0;

            border-right: 100px solid transparent;

            border-bottom: 70px solid #ff0;

            border-left: 100px solid transparent;

            -webkit-transform: rotate(35deg);

            -moz-transform: rotate(35deg);

            -ms-transform: rotate(35deg);

            -o-transform: rotate(35deg);

            transform: rotate(35deg);

        }

        .jiao::before{

            height: 0;

            width: 0;

            display: block;

            position: absolute;

            top: -45px;

            left: -65px;

            content: '';

            color: #ff0;

            border-right: 30px solid transparent;

            border-bottom: 80px solid #ff0;

            border-left: 30px solid transparent;

            -webkit-transform: rotate(-35deg);

            -moz-transform: rotate(-35deg);

            -ms-transform: rotate(-35deg);

            -o-transform: rotate(-35deg);

            transform: rotate(-35deg);

        }

        .jiao::after{

            width: 0px;

            height: 0px;

            display: block;

            position: absolute;

            color: #ff0;

            top: 3px;

            left: -105px;

            border-right: 100px solid transparent;

            border-bottom: 70px solid #ff0;

            border-left: 100px solid transparent;

            content: '';

            -webkit-transform: rotate(-70deg);

            -moz-transform: rotate(-70deg);

            -ms-transform: rotate(-70deg);

            -o-transform: rotate(-70deg);

            transform: rotate(-70deg);

        }

        .one{

            transform:translate(-140px, 20px) rotate(35deg) scale(0.3,0.3);

        }

        .two{

            transform:translate(-90px, -80px) rotate(60deg) scale(0.1,0.1);

        }

        .three{

            transform:translate(-68px, -125px) rotate(80deg) scale(0.1,0.1);

        }

        .four{

            transform:translate(-68px, -162px) rotate(35deg) scale(0.1,0.1);

        }

        .five{

            transform:translate(-90px, -210px) rotate(65deg) scale(0.1,0.1);

        }

    </style>

</head>

<body>

<div class="backgroundOne">

    <div class="jiao one"></div>

    <div class="jiao two"></div>

    <div class="jiao three"></div>

    <div class="jiao four"></div>

    <div class="jiao five"></div>

</div>

</body>

</html>


正在回答

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

1回答

完成的很好,代码简洁和规范,有一点建议,代码前面写了transform的兼容性,后面不要忘记呦!希望对你有帮助,祝学习愉快,欢迎采纳。

  • 9玖月 提问者 #1
    非常感谢小于飞飞导师的建议!
    2017-02-08 14:56:22
  • 9玖月 提问者 #2
    小于飞飞导师,我还有一个疑问,为什么可以给伪元素加position: absolute; 伪元素不是不存在的元素? 还有rotate(35deg) 能具体加一下?上面代码主要是参考你和学员的交流后写出来的。请小于飞飞导师指点一下!
    2017-02-08 15:22:01
  • 小于飞飞 回复 提问者 9玖月 #3
    伪元素虽然不存在的元素,但是我们可以设置他的css样式。对js就获取不到他了,因为他不是元素。“ 还有rotate(35deg) 能具体加一下?”这个问题不是特别明白什么意思呦。 “”
    2017-02-09 16:23:12
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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