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

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

<!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>

css html

阅读 2k

2 个回答

得票最新

luke丶y

4625

发布于
2016-09-21

✓ 已被采纳

利用的是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就好了