原理
盒子宽高为0,添加border,每边border可构成三角形
正三角
- html
<body>
<div class="box"></div>
</body>
- css
<style>
.box {
width: 0;
height: 0;
boder: 10px solid transparent;
border-top-color: blue;
}
</style>
非正三角
<style>
.box {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
</style>
网友评论