技术栈

css实现梯形?

一个大长腿2024-03-14 14:31

HTML:

html 复制代码
<div class="box"></div>

CSS:

html 复制代码
.box{
    width:50px;
    height:0;
    border-bottom:50px solid pink;
    border-left:50px solid #fff;
    border-right:50px solid #fff;
}

效果:

上一篇:如何优雅解决前后端数据结构重复问题
下一篇:Python的基础操作
相关推荐
烛阴
1 分钟前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子
13 分钟前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder
20 分钟前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛
22 分钟前
vue3中实现echarts打印功能
前端·vue.js·echarts
尘心cx
24 分钟前
前端-HTML-day2
前端·html
歘chua
25 分钟前
组件封装:封装一个可复用的crud界面的思路
前端
徐小夕
26 分钟前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
爱编程的喵
28 分钟前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css
zmirror
29 分钟前
Webpack5 多页面实践
前端
cccyi7
30 分钟前
vue前置知识-end
前端·javascript·vue.js
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践(附国内和国际版对比)04免费领50刀!AnyRouter一键解锁Claude最强编程模型05Java学习第十五部分——MyBatis06扣子(coze)实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07RAL-2025 | 触觉助力无人机空中探索!基于柔顺机器人手指的无人机触觉导航08基于odoo17的设计模式详解---单例模式09DeepSeek各版本说明与优缺点分析10浅谈几种js设计模式