前端理论总结(css3)——三角形/梯形 // 一边固定另一边自适应

三角形/梯形

三角形
css 复制代码
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
梯形
css 复制代码
width: 50px;
height: 0;
border-bottom: 50px solid red;
border-left: 50px solid #fff;
border-right: 50px solid #fff;

一边固定另一边自适应

父元素:display: flex;

固定元素:min-width

自适应元素:width

相关推荐
在钱塘江4 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码4 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说9 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015510 分钟前
最常用的JS加解密场景MD5
前端
Hilaku10 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
打好高远球16 分钟前
mo契官网建设与SEO实践
前端
神仙别闹22 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
心.c37 分钟前
react当中的this指向
前端·javascript·react.js
Java水解44 分钟前
Web API基础
前端
闲鱼不闲1 小时前
实现iframe重定向通知父级页面跳转
前端