css实现梯形详解编程语言
2023-06-13 09:11:47 时间
使用伪元素before和after分别在矩形元素前后加三角形或者直接设置border
使用3d旋转矩形,使之看起来像矩形
html head meta charset="utf-8" style .trapezoid-0{ border-bottom: 100px solid #fb3; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; margin: 0 0 20px 0; } .trapezoid-1{ border-radius: .5em .5em 0 0; margin: 20px; height: 40px; width: 100px; background: #fb3; transform-origin: bottom; transform: scaleY(1.3) perspective(.5em) rotateX(5deg); /*scaleY: 纵轴放大1.3倍,使梯形高度等于height;perspective:3d透视效果,元素距离视图的距离*/ } /style /head body div /div div /div /body /html
原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/17334.html
cjavaxml相关文章
- css opacity属性_CSS中的opacity属性[通俗易懂]
- 性能优化之YUICompressor压缩JS、CSS
- css 文字自适应大小_div自适应窗口大小
- 【说站】css中z-index属性
- CSS媒体查询_css网页
- html怎么隐藏播放器_css遮罩
- CSS 换行_css不允许换行
- JS+CSS自定义右键菜单美化
- Webpack中给CSS自动添加前辍
- 【CSS】PhotoShop 切图 ③ ( PhotoShop 切图插件 - Cutterman | 下载、安装、启动、注册、登录 Cutterman - 切图神奇 插件 | 使用插件进行切图 )
- css问题详解编程语言
- 使用html+css+js实现3D相册详解编程语言
- 使用html+css+js实现魔性的舞蹈详解编程语言
- CSS学习摘要-数值和单位及颜色详解编程语言
- 常见的几种 CSS 水平垂直居中解决办法详解编程语言
- CSS布局 — 左右定宽,中间自适应详解编程语言
- Div+Css实现段落首行缩进两个字符(text-indent标签)详解编程语言
- 6种编写HTML和CSS的最有效的方法详解编程语言
- 深入理解CSS中的层叠上下文和层叠顺序详解编程语言
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- CSS规则层叠的应用css必须要注意的几点
- juqery学习之六CSS--css、位置、宽高
- 一个CSS+jQuery实现的放大缩小动画效果