css实现梯形样式(含有border)
类似本文热门评论 效果
.hot-comment-title{
float:right;
position:absolute;
right: -8px;
top: -30px;
padding: 0;
text-decoration: none;
display: inline-block;
z-index: 0;
width:140px;
height:40px;
line-height:28px;
text-align:right;
padding-right:10px;
font-size:16px;
}
.hot-comment-title::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #2486C9;
border-bottom: none;
-webkit-transform:perspective(1em)scale(1.1,1.3) rotateX(5deg);
z-index: -1;
-webkit-transform-origin:bottom right;
}
border: 1px solid #2486C9;
border-bottom: none;
-webkit-transform:perspective(1em)scale(1.1,1.3) rotateX(5deg);
z-index: -1;
-webkit-transform-origin:bottom right; 核心代码
css实现梯形样式(含有border)的更多相关文章
- 11种常用css样式之border学习
边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...
- [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.
最近在做Lodop打印功能: 思路是: 用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是: 在打印的JS文件中, 引 ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- Css - 选择器和样式
Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style> div{ background:red; } </style> <div&g ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- css清除默认样式
CSS 清除默认样式 通常有以下几句就够了: *{margin:0;padding:0} li{list-style:none} img{vertical-align:top;border:non ...
随机推荐
- ASP.NET Core ResponseCache进行缓存操作
前言 本章将介绍客户端缓存将介绍浏览器缓存和服务端缓存,使用浏览器缓存将减少对web服务器的请求次数,同时可以提升性能,避免重复的运算浪费. ASP.NET Core对于HTTP缓存分为两种: 客户端 ...
- Webpack之optimization.splitChunks代码分割插件的配置
SplitChunkPlugin插件配置参数详解 对引入的库代码(例如:lodash.jQuery等)进行代码的分割进行优化 若配置时只写chunks:"all",其余则为默认配置 ...
- 高灵敏度自带DSP降噪算法的audio codec解决方案
背景调研 随着AI渗透到各行各业,人们对语音的需求也越来越大,最近一两年,各种AI音频设备如雨后春笋般冒出.各种智能AI设备的推出,意味者市场对低成本的音频采集设备越来越多.针对这种情况,我们开发 ...
- Javascript 基础学习(三)js 的原始类型和声明变量
java的基本数据类型一共有 byte short int long float double char boolean js中定义变量使用关键字 var js的原始类型(五个) String: 字符 ...
- 痞子衡嵌入式:ARM Cortex-M内核那些事(6)- 系统堆栈机制
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M堆栈机制. 今天给大家分享的这篇依旧是2016年之前痞子衡写的技术文档,花了点时间重新编排了一下格式.前面痞子衡 ...
- vue搭建手顺
1.环境准备:node.js vue-cli: $ npm install vue-cli -g 2.建立项目目录:vuedemo,并cd到该目录下 3.$ vue init webpack vu ...
- Session注销后,浏览器后退仍显示Session信息
初学JavaWeb,在一次测试登录功能的时候,发现了登进去后,点击退出按钮注销session,浏览器按后退能够显示session信息,并且点击登录还能够不输入密码登录(前端页面没写JS限制输入后登录) ...
- 吴裕雄--天生自然 R语言数据可视化绘图(4)
par(ask=TRUE) # Basic scatterplot library(ggplot2) ggplot(data=mtcars, aes(x=wt, y=mpg)) + geom_poin ...
- ggEditor流程图增加网格背景
参考官方文档: https://www.yuque.com/antv/g6/plugin.tool.grid react-ggEditor如何使用 import { Flow } from 'gg-e ...
- 数据库中间件DBLE学习(二) 学习配置schema.xml
前言 一边有一个经常引诱我让我"娱乐至死"的视频,还有一个不停"鞭策"我让我快点学习的大BOSS.正是有这两种极端的爱才让我常常在自信中明白自己努力的方向.嗯, ...