html中切角文本框,css实现切角效果
1. 一个切角
思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的背景色。
html
css
.corner{
width: 200px;
height: 150px;
background: #58a;
background: linear-gradient(-45deg,transparent 20px,#58a 0);
}
效果图
2. 两个切角
由上面的例子,我们很快想到这么写
css
.corner{
width: 200px;
height: 150px;
background: #58a;
background: linear-gradient(-45deg,transparent 20px,#58a 0),
linear-gradient(45deg,transparent 20px,#58a 0);
}
效果图
我们发现并没有达到我们想要的效果,这是因为左下角和右下角的两个渐变把对方覆盖了,所以只看到背景色。
于是我们想到了background-size,没错,如果把background-size的值设置为一半,是不是就可以了呢?事实证明还是不对,原因在于我们忘记把background-repeat关掉了,因而每层渐变图案各自平铺了两次,这导致背景仍然是相互覆盖的,只不过这次是因为背景平铺,所以修改后的代码是这样的:
css
.corner{
width: 200px;
height: 150px;
background: #58a;
background: linear-gradient(-45deg,transparent 20px,#58a 0) right,
linear-gradient(45deg,transparent 20px,#58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
效果图:
3. 四个切角
css
.corner{
width: 200px;
height: 150px;
background: #58a;
background: linear-gradient(-45deg,transparent 15px,#58a 0) bottom right,
linear-gradient(45deg,transparent 15px,#58a 0) bottom left,
linear-gradient(135deg,transparent 15px,#58a 0) top left,
linear-gradient(-135deg,transparent 15px,#58a 0) top right;
background-size: 50% 51%;
background-repeat: no-repeat;
}
效果图
这里需要注意的是:background-size: 50% 51%;如果高度设置为50%,中间会出现一条空隙。
4. 弧形切角
css
.corner{
width: 200px;
height: 150px;
background: #58a;
background: radial-gradient(circle at bottom right,transparent 15px,#58a 0) bottom right,
radial-gradient(circle at bottom left,transparent 15px,#58a 0) bottom left,
radial-gradient(circle at top left,transparent 15px,#58a 0) top left,
radial-gradient(circle at top right,transparent 15px,#58a 0) top right;
background-size: 50% 51%;
background-repeat: no-repeat;
}
效果图
5. 使用border-imgage+svg实现
6. 使用clip-path实现
css
.corner{
width: 330px;
height: 250px;
background: url('ssd.jpg');
background-size: cover;
clip-path: polygon(20px 0,calc(100% - 20px) 0,
100% 20px,100% calc(100% - 20px),
calc(100% - 20px) 100%,20px 100%,
0 calc(100% - 20px),0 20px);
}
效果图
这种方法的好处是:我们可以使用任意类型的文本,但是有一个很大的缺点是:当内边距不足时,它会裁切掉文本,因为它只能对元素进行统一的裁切,并不能区分元素的各个部分。
.corner{
width: 330px;
height: 250px;
background: url('ssd.jpg');
background-size: cover;
clip-path: polygon(20px ,calc(100% - 20px) ,
100% 20px,100% calc(100% - 20px),
calc(100% - 20px) 100%,20px 100%,
calc(100% - 20px), 20px);
}
css 折角效果/切角效果
首先我们先创建一个图案为100像素的斜面切角的图案 html
css .one{ width: 1 ...
CSS3样式linear-gradient的使用(切角效果)
linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...
css切角效果,折角效果
html
用css实现网站切角效果 使用css3属性:渐变
都是大量的练习,老师练习乒乓球花了大量时间,十万次一个动作的重复,高中班主任说过,世上没有天才,只是重复的次数多了,自然被认作了天才,小小班的学生之所以厉害是因为他们重复一个知识点次数多,所以没有一 ...
CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)
今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML:
随机推荐
【J-meter】变量加密之Bean shell使用
参考资料: http://www.cnblogs.com/puresoul/p/4915350.html http://www.cnblogs.com/tester-hehehe/p/5466364. ...
Myeclipse非正常关闭出现问题
Could not create the view: An unexpected exception was thrown. 解决办法: 关闭myeclipse 原来工作空间的.metadata文件夹 ...
windows 通过ssh连接到Linux主机
1. 确定Linux主机已经开启了ssh功能. 1.1--确认sshserver是否启动 ps -e |grep ssh 如果只有ssh-agent那ssh-server还没有启动,需要/etc/in ...
LA 3641 (置换 循环的分解) Leonardo's Notebook
给出一个26个大写字母的置换B,是否存在A2 = B 每个置换可以看做若干个循环的乘积.我们可以把这些循环看成中UVa 10294的项链, 循环中的数就相当于项链中的珠子. A2就相当于将项链旋转了两 ...
php错误处理和异常处理
PHP错误处理有两种:标准的错误处理和异常(OOP语法新出现的错误处理机制)
利用btrace工具监控在线运行java程序
一.作用 可以用于对运行中java程序进行诊断监控分析,也可以用于开发阶段查看一些异常信息或者调用过程(如有些第三方代码没有源代码,不便于debug调试). 注:如果用于对在线运行系统的诊断,需 ...
ArcGIS三种方式打断相交线------拓扑法
拓扑法:有多个layer图层相交线,选用拓扑法,将多个图层相交线打断. 新建拓扑结构: (1)单击新建"Nfg.gdb"数据库文件: (2)单击新建"XX"集合 ...
时间序列数据库rrd启动
然后执行启动定时任务目录:etc/crontab SHELL=/bin/bashPATH=/sbin:/bin:/usr/sbin:/usr/binMAILTO=rootHOME=/ # For de ...
LeetCode题型分类及索引
目录 这是一个对LeetCode题目归类的索引,分类标准参考了July大神的以及LeetCode的tag项.分类可能还不太合理,逐步完善,请见谅~ 题主本人也在一点一点的刷题, ...
修改linux终端命令行各字体颜色
这里我用的是 CentOS 7.5,觉得linux终端命令行全部为白色,会经常导致命令与输出内容难以分辨.于是上网找到修改linux终端命令行颜色的方法,发现通过定义PS1环境变量即可实现,下面我以r ...
html中切角文本框,css实现切角效果相关推荐
- tableView cell 中如果有文本框点击自动滚动不被键盘挡住
tableView cell 中如果有文本框点击自动滚动不被键盘挡住 tableView 是继承UIscrollView,所以自然有setContentOffset方法,该方法可以设置tableVie ...
- Word中的滚动文本框是如何制作(可以)
在对文档进行排版的过程中,有时候需要对某些内容.图片进行备注说明,或是需要在某处添加一个外部文档的内容,但由于要添加的内容过多,直接添加到该处可能会影响排版,同时上翻下翻十分不便,放在一页又受版面限制 ...
- word中图形或文本框的组合问题
word中图形或文本框的组合问题 按住CTRL键选择要组合的图片或文本框,记得箭头线或线条也要选择,然后右击,选择组合!然后整个就能一起移动!
- html 文本框css设置边框圆角
html 文本框css设置边框圆角如下图: css代码如下:input{border:1px solid black;width:295px;height:40px;border-radius:25p ...
- SAP ABAP屏幕(Dialog)开发中,获取文本框的内容并且存到数据库中。
续更SAP相关内容. 这次讲一下在ABAP屏幕开发中怎样获取文本框的值. 在C# Winform开发中,我们直接 textBox.Text就可以取到文本框的值,但在ABAP中要繁琐一些. 好了,操作. ...
- html获得文本框的值,jQuery中怎么获取文本框的值?
jQuery中怎么获取文本框的值?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jQuery中获取文本框值的方法 下面就结合简单的代码示例,给大家介绍j ...
- css合并两个文本框,css实现input文本框的双边框美化
css实现input文本框的双边框美化 .input_div{width:250px; height:22px; border-style:solid; border-width:1px 0 1px ...
- vue中wangeditor富文本框的使用方法
vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor .开始我用的是 vue-quill-editor,后来又换成了 wangeditor.为啥呢?因为 vu ...
- html在文本框添加相机图标,[Bootstrap]Bootstrap中如何给文本框添加图标?
问题描述 如题,在Bootstrap中,如何为一个文本框添加图标呢?比如有实现一个用户名的文本框,如下图: 方案一 参考官方的示例代码(无需写其他的CSS样式): 方案二 不使用 Bootstrap实 ...
最新文章
- LinkedHashMap and LinkedHashSet
- house robber java_java之 ------------[LeetCode] House Robber 打家劫舍||
- 在ubuntu上使用SSH客户端
- Python Django 事务管理
- ckeditor3 在Asp.net MVC2.0环境中的配置
- Execution Order of Event Functions, unity 3d 事件函数的执行顺序
- FreeModbus ASCII传输
- 干活的不如写ppt的吗_干活不如写PPT 这话太真实
- 【Android游戏开发之一】设置全屏以及绘画简单的图形
- keil的configuration wizard配置和使用
- OJ 21658::Monthly Expense(二分搜索+最小化最大值)
- 6.2 栅格数据矢量化
- 【博客目录】成为一个优秀的数据工程师
- 42表盘直径是从哪测量_手表尺寸怎么选择 手表尺寸怎么测量
- 哦麦艾斯!AI设计的丑衣服将引领时尚?数据结构与算法代码面试题;将文件藏在图片里的隐写工具;蒙古语语音合成语料库
- 【无人机】基于混合粒子群算法求解无人机航迹规划问题附Matlab代码
- goahead解析(一)---------route.txt
- LIS2MDL磁力计驱动
- 氨基官能化的铜金属有机骨架(Cu-MOF-NH2)|石墨相碳化氮纳米片/ZiF67片层结构复合材料|mof定制材料
- UE4《大象无形》学习笔记