老师，我写的出来2个三角形

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>自定义视频播放器</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .outerNode{
                width: 540px;
                height: 332px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -166px 0 0 -270px;
                box-shadow: 0 0 4px #5b606d;
            }
            .outerNode .videoNode{
                width: 540px;
                height: 305px;
                float: left;

            }
            .outerNode .controlsNode{
                width: 540px;
                height: 27px;
                float: left;
                background: url(../ctrls_bg.gif) repeat-x;
            }
            .outerNode .controlsNode .playNode{
                float: left;
                width: 13px;
                height: 15px;
                margin: 6px 0 0 14px;
                background: url(../playNode.png) no-repeat;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <!--最外层元素-->
        <div class="outerNode">
            <!--video元素-->
            <video class="videoNode" src="../imooc.mp4" controls poster="../poster.jpg"></video>
            <!--控制器的元素-->
            <div class="controlsNode">
                <div class="playNode"></div>
            </div>
        </div>
    </body>
</html>

蒹葭苍沧 2021-01-08

源自：HTML5音视频 4-1 video-布局（1）

12

收起

2回答

好帮手慕言 2021-01-08 19:06:10

同学你好，老师以为同学说的是截图中的小三角，所以才说是自带的。如下：

如果是老师课程中讲的案例，那么：使用图片或者自己写小三角都是可以的。

目前阶段同学对项目还不是很熟悉，建议同学可以和老师的代码保持一致，更有利于同学学习，如果对项目非常熟悉了，可以再按照自己的想法改写。

祝学习愉快~

好帮手慕言 2021-01-08 18:43:52

同学你好，如果同学可以写出来三角形，很棒呦。video标签自带小三角，点击可以播放，使用自带的就可以，祝学习愉快~

提问者蒹葭苍沧 #1

但是案例上只有1个三角形啊

2021-01-08 18:53:19

相似问题

老师，请问这个五角星要怎么写

为什么用border可以设置一个三角形，不明白~！~~！~

作业中的三角形怎么做

通过三角形拼成五角星，具体尺寸是怎么计算的

ABOUT区的下部分（图文交错显示）的三角怎么做？

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

3.WebAPP开发与小程序

参与学习人
提交作业 622 份
解答问题 6815 个

微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。

本课精华内容

问答作业

代码分享-模仿高德官网效果做的

129 1

为什么图片这么大

27 15

老师帮我看下为什么谷歌浏览器点不了进度条没次点击都会重新播放用火狐浏览器就是可以的

34 14

这两个公式怎么推导出来的？

40 13

laoshi老师

57 13

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载