如何使用css绘制梯形 矩形 三角形

矩形

实现代码如下

<div class="box"></div> <style> .box{ width: 50px; height: 50px; border-width: 30px; border-style: solid; border-color: #07C160 #FA5151 #409eff #e6a23c; } </style>

梯形

实现代码如下

<style> .box{ width: 50px; height: 50px; border-width: 30px; border-style: solid; //只需要把不需要保留的设置为transparent border-color: #07C160 transparent transparent transparent ; } </style> <div class="box"></div>

实心三角形

<style> .box{ //设置宽高为0 width: 0px; height: 0px; border-width: 30px;//控制三角形的大小 border-style: solid; border-color: #409eff transparent transparent transparent ;//把不需要出现设置为透明 } </style> <div class="box"></div>