CSS画梯形的方法
墨初 前端设计 2266阅读
CSS画梯形的方法是很多的,下面就给出几个示例,各位参考一下。
CSS画梯形的方法
方法1:
<style> #m{ height: 0; width: 100px; border-top: 100px solid red; border-right: 37px solid transparent; } </style> <div id="m"></div>
运行效果
方法2:
<style> #m{ width:100px; height:0; border-width:0 37px 100px 37px; border-style:none solid solid; border-color:transparent transparent red; } </style> <div id="m"></div>
运行效果
方法3:
<style> #m{ width:100px; height:0; border-top: 100px solid red; border-right: 37px solid transparent; border-left:37px solid transparent; } </style> <div id="m"></div>
运行效果
方法4:
<style> #m{ width:100px; height:0; border-top:100px solid red; border-left:37px solid transparent; } </style> <div id="m"></div>
运行效果