为什么这段代码是一个三角形?如何理解哦

为什么这段代码是一个三角形?如何理解哦

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.arrow-right {

width:0;

height:0;

border-style:solid;

border-width:20px 20px 20px 30px;

border-color: transparent transparent transparent #07cbc9;

}

</style>


</head>

<body>

<div class="arrow-right"></div>

</body>

</html>



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

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

1回答
好帮手慕夭夭 2019-03-22 18:14:34

你好同学 ,当给一个盒子边框设置成不同的颜色时 ,如下:

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

会发现 ,边框的表现形式是4个三角 :

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

例如你想要留下右边的三角 ,就可以把其他三个设置成透明色 ,如下:

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

这样就实现三角形:

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

自己可以练习一下哦 , 祝学习愉快 ,望采纳 .

  • 提问者 晓舟 #1
    width和height设置成0的正方形边框为什么会呈现这个形状,如何理解呢
    2019-03-23 10:32:28
  • Steve007 回复 提问者 晓舟 #2
    同学,你好。width和height设置成0后,整个正方形就都是由边框组成的,因此会出现由四个边框三角组成的正方形。 祝学习愉快!
    2019-03-24 15:53:44
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

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

在线咨询

领取优惠

免费试听

领取大纲

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