css3切角文本框_CSS3样式linear-gradient的使用(切角效果)
缺角效果
先看效果图
这是内容
.div1 {
width: 100px;
height: 40px;
line-height: 40px;
background:linear-gradient(-135deg, transparent 15px, #162e48 0);
color: #fff;
padding: 5px 15px;
text-align: center;
margin-bottom: 30px;
}
补角效果
先看效果图
这是内容
.div2 {
width: 100px;
height: 40px;
line-height: 40px;
background:linear-gradient(-135deg, #f00 15px, #162e48 0);
color: #fff;
padding: 5px 15px;
text-align: center;
margin-bottom: 30px;
}
只是在栗子1的基础上修改了linear-gradient,将transparent修改为#f00
带边框的效果
先看效果图
这是内容
.div3 {
width: 100px;
height: 40px;
line-height: 40px;
background:linear-gradient(-135deg, #f00 15px, #162e48 0);
color: #fff;
padding: 5px 15px;
text-align: center;
margin-bottom: 30px;
box-shadow: 0 0 1px 1px #fff inset;
}
在栗子2的基础上增加了box-shadow,当然加边框可以有多种方式,可自行选择。
开关效果
效果图
.div4 {
width: 144px;
height: 30px;
line-height: 30px;
background: #162e48;
color: #FFF;
text-align: center;
margin-bottom: 30px;
}
.div4-1, .div4-2 {
width: 86px;
float: left;
}
.div4-1.active {
margin-right: -28px;
background:linear-gradient(-135deg, transparent 20px, #f00 0);
}
.div4-2.active {
margin-left: -28px;
background:linear-gradient(45deg, transparent 20px, #f00 0);
}
最终效果可根据需要自行调整
在栗子3的基础上做到以下效果,单纯使用linear-gradient没有找到解决方法,如有方案,请在评论下给出方案。以下是其中一种解决方式
效果图
.div5 {
width: 100px;
height: 40px;
line-height: 40px;
background:linear-gradient(-135deg, #fff 15px, #162e48 0);
color: #fff;
padding: 5px 15px;
text-align: center;
box-shadow: 0 0 1px 1px #fff;
margin-bottom: 30px;
position: relative;
}
.div5:after {
content: ' ';
border: solid transparent;
position: absolute;
border-width: 15px;
border-top-color: #000;
border-right-color: #000;
top: -1px;
right: -1px;
}
考虑到兼容性问题,可以通过:before和:after实现同样的效果,给出一个栗子
.div6 {
width: 100px;
height: 40px;
line-height: 40px;
background:#162e48;
color: #fff;
padding: 5px 15px;
text-align: center;
position: relative;
border: 1px solid #fff;
margin-bottom: 30px;
}
.div6:before {
content: ' ';
border: solid transparent;
position: absolute;
border-width: 15px;
border-top-color: #fff;
border-right-color: #fff;
right: 0px;
top: 0px;
}
.div6:after {
content: ' ';
border: solid transparent;
position: absolute;
border-width: 15px;
border-top-color: #000;
border-right-color: #000;
top: -1px;
right: -1px;
}
css3切角文本框_CSS3样式linear-gradient的使用(切角效果)相关推荐
- css3切角文本框_CSS3+jQuery制作切角的Tabs
今天在Red阅读了一篇<CSS3 tabs with beveled corners>博文,介绍了使用CSS3制作切角的Tabs,觉得特有意思.其中含量最高的并不是其如何实现的Tabs,而 ...
- css3切角文本框_CSS3切角选项卡tabs
今天你将学习如何创建使用CSS3渐变技术实现切角的选项卡tabs. HTML One Two Three Four One - content Two - content Three - conten ...
- css3切角文本框_CSS3如何实现4个切角
谢邀..既然如此,就说的详细点吧.. 首先回答问题2: 在这个例子里,要知道 background-size:50% 50%; 意思是你设置的背景长和宽各为元素的一半.也就是为如果你的背景是张图片,那 ...
- css3切角文本框_CSS3:linear-gradient切角画册
关于linear-gradient的语法就不多做介绍了网上到处都是,下面看个小例 我们先做一个渐变,使其让他旋转, .example{ height:150px; width:500px; margi ...
- HTML文本框参考样式及常见操作技巧大全
网页设计中,常常要使用html文本框来收集一些用户信息或是制作登录页,虽然只是简单的输入框,但是如果加入一些美化设计会使你的页面看起来更加有吸引力,下面就给大家提供了一些html文本框的参考样式和常见 ...
- php输入文本框样式,【js】:检测用户输入、文本框默认样式设置、设计表格样式实现全选反选...
Topic 1 : 检测用户的输入 : 题目要求: 编写一个用户注册页面 检测用户名是否是6位以下,密码是否是8位以上,如果不满足要求高亮显示文本框 : 代码如下 : 用户注册页面 .bg {back ...
- html中怎么写输入框,HTML文本框参考样式及常见操作技巧大全
在网页设计中,常常要使用 html 文本框来收集一些用户信息或是制作登录页,虽然只是简单的输入框,但是如果加入一些美化设计会使你的页面看起来更加有吸引力,下面就给大家提供了一些 html 文本框的参考 ...
- html中切角文本框,css实现切角效果
1. 一个切角 思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...
- wxpython中的所有文本框都是TextCtrl,不同的形式的文本框通过样式来实现,下面创建了一个密码输入框...
''' wx.TE_CENTER:控件中的文本居中. wx.TE_LEFT:控件中的文本左对齐.默认行为. wx.TE_NOHIDESEL:文本始终高亮显示,只适用于Windows. wx.TE_PA ...
最新文章
- 编程进阶,学会使用_I、_O、_IO,以及volatile const的意义
- oracle clob
- bgp 建立邻居发送的报文_大型网络BGP之IBGP和EBGP邻居关系基础配置
- zigbee物联网模块标准:LTE标准Cat.1和nbiot无线通信模块差异
- 今早服务器出现的问题
- Teamviewer 手机端怎么使用右键-已解决
- 工程师软技能4:找出你的短板
- JPA的单向一对多关联(oneToMany)实现示例(基于Spring Boot + JPA +MySQL,表自动维护)
- C# servicestack.redis 互通 java jedis
- python如何打开npy文件_操作python实现npy格式文件转换为txt文件
- Spring Boot 框架介绍和使用
- 【红绿灯识别】基于matlab红绿灯识别【含Matlab源码 1068期】
- C语言编写猜数字小游戏
- Ubuntu离线安装curl
- iZotope RX 7 Advanced混音插件使用教程
- 20170223找女朋友之路思考总结
- 基于 Springboot 和 Mybatis 的后台管理系统 BootDo | 软件推介
- 联想笔记本——更换SSD并重装系统
- python 删除pdf页面_使用python从新生成的pdf文件中删除空白页
- 矩阵导数(Matrix Differentia)