CSS 实现圆角梯形

我们用 CSS 实现一个梯形，效果如下图：

可能大家没有思路，我们可以实现一个圆角正方形，效果图如下：

代码实现如下：

.skewed {position: relative;display: inline-block;width: 80px;height: 80px;
}
.skewed::before{ content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: pink;border: 1px solid #ff9900;border-radius: 8px;z-index: -1;
}

那如何转变成梯形的呢？添加如下代码：

.skewed::before{-webkit-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);-moz-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);-ms-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);-o-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);-webkit-transform-origin:bottom right;  transform-origin:bottom right;
}

案例实现，效果图如下：

<div class="content"><div class="nav">我要询价</div><div class="line"></div><div class="nav">我要发运</div>
</div>

样式效果：

.content {display: flex;align-items: baseline;
}
.nav {position: relative;text-decoration: none;display: inline-block;width: 100px;font-size: 12px;color: #666;line-height: 20px;
}
.nav::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #fff;border: 1px solid #ededed;border-bottom: none;border-radius: 15px 15px 0 0;box-shadow: 3px -3px 5px #ededed;transform: perspective(10px)scale(1.1, 1.3) rotateX(5deg);z-index: -1;
}
.line {width: 90px;background: #ededed;height: 1px;box-shadow: 2px 0 3px #ededed;transform: translate(0px, 4px);z-index: -999;
}

CSS 实现圆角梯形相关推荐

corners边框_第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目
有人可能会疑惑,我为什么专门用一节内容来说边框和圆角.其实,不为别的,只为它们在开发中,在Web系统中,在手机页面中,太常用了.有边框的页面,让人耳目一新,一目了然:有圆角的内容,让人赏心悦目,心旷神 ...
css手机圆角毛刺_CSS毛刺效果
css手机圆角毛刺 View demo 查看演示Download Source 下载源 Today we'd like to show you how to create a little exper ...
纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
div+css实现圆角阴影效果
使用div+css实现圆角阴影在css中,使用border-radius属性设置圆角,使用box-shadow属性设置阴影下面教你css如何实现圆角边框阴影代码: <input type= ...
长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解
传统的圆角矩形实现,必须使用多张图片作为背景图案.CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了. css实现圆角矩形.半圆.圆形效果的优点: * 减少维护的工作量, ...
简洁文艺风博客园CSS定制——圆角蓝文艺字体
简洁文艺风博客园CSS定制--圆角蓝文艺字体今天入驻博客园,自己做了下页面的CSS 瞬间变得舒服多了哈哈直接上代码 1 /* Minification failed. Returning unm ...
html中正方形圆角框,CSS高级技巧:圆角矩形
所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍. CSS2 还没有办法创造出曲线边框, 明 ...
Inkscape绘制梯形和圆角梯形
废话不多说,直接上,希望帮助有需要的人. 用左侧工具栏创建矩形或正方形工具绘制一个矩形在路径菜单栏中选择对象转路径选中矩形后,点击左侧工具栏通过节点编辑路径,然后选中显示选中节点的变形控制手柄框 ...
如何做出html直角梯形效果,css怎么做梯形？
在HTML项目中可以通过css设置一些常用的形状,想知道css如何制作梯形吗?下面我们来看一下css制作梯形的方法. css制作梯形示例: Document .trapezoid{ border-bo ...
html中table四角圆弧,利用作图软件（FireWorks）或CSS制作圆角表格（表格四角为圆润）。...
利用作图软件(FireWorks)或CSS制作圆角表格(表格四角为圆润). 更多相关问题物理爆炸包括液化石油气罐因承受不了罐里面的压力而发生的爆炸.() 富含氧和氢元素的化合物是可燃物.() 润滑油 ...

CSS 实现圆角梯形

CSS 实现圆角梯形相关推荐

最新文章

热门文章