校园网开发问题

校园网开发问题

http://img1.sycdn.imooc.com//climg/6020c42f0906acea07750351.jpg

​请问老师这个三角形是怎么实现的

正在回答 回答被采纳积分+1

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

1回答
好帮手慕阿慧 2021-02-08 15:22:29

同学你好,本次作业中三角不用完成也可以,不做要求。如果同学想完成,可以参考以下思路:

同学可尝试使用一个div来完成,设置宽度和高度为0。然后设置div的边框,设置左边框为30px solid #07cbc9,其他方向的边框都是30px solid transparent,就可以得到一个指向右的三角形了。其中的30px是三角形右顶点到左边的高。如果设置指向左的三角形,可以将左右边框的属性值进行替换。参考代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#triangle {
width: 0;
height: 0;
border-left: 30px solid #07CBC9;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 30px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

​祝学习愉快~

  • 提问者 一娆Hacker #1

    原理是什么呢 这四个不是div的四条边吗 为什么可以斜成三角形

    如果这个三角形做好了,怎么安排到合适的位置上呢?

    用绝对定位吗?

    2021-02-08 16:29:57
  • 小菜鸟20 回复 提问者 一娆Hacker #2

    关于原理,你可以参考这个文档:

    https://www.jianshu.com/p/9a463d50e441

    你可以使用绝对定位放到合适的位置上。

    望采纳!

    2021-02-08 17:25:33
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星

相似问题

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

请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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