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

    技术2022-08-16  92

    矩形

    实现代码如下

    <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>
    Processed: 0.020, SQL: 9