效果图
如下图所示,让一个 div 变成三角形,并且可随意更改大小,
本文提供了可运行示例源码,直接复制即可。
实现源码
建议创建一个 demo.html
文件,一键复制代码运行。
<style>
.div{width: 0px;height: 0px;/* 调得越大三角形越大 */border-width: 100px;/* END */border-style: solid;border-color: red transparent transparent transparent;overflow: hidden;font-size: 0;line-height: 0;
}
</style><body><div class="div"></div>
</body>
写在后面
其实实现方法还有很多,如果仅仅是为了展示,本文的方案比较简单粗暴。