在阮一峰老师的博客里看到这样一段代码,不太懂为什么会画出三角形来?

前端小白de窝
  • 394

在阮一峰老师的博客里看到这样一段代码,的确是可以画出三角形,但是为什么呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div.triangle {
        border-color: transparent transparent green transparent;
        border-style: solid;
        border-width: 0px 30px 30px 30px;
        height: 0;
        width: 0;
    }
</style>
<body>
    <div class="triangle">
        
    </div>
</body>
</html>
回复
阅读 1.4k
2 个回答

利用的是border的属性,换一种写法你可能会懂,代码如下:.pop {

height: 0;
width: 0;
border-top: 30px solid #FF1493;
border-bottom: 30px solid #EEEE00;
border-right: 30px solid #EEE5DE;
border-left: 30px solid #EE3B3B;

}
把不要显示的变成transparent就好了

你将 border-color: transparent transparent green transparent;
border-width: 0px 30px 30px 30px;

全部都设置颜色 宽度全设为30px 看看就知道了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏