前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）
各种demo：
1、css实现正方形
思路：width为0；height为0；使用boder-width为正方形的边长的一半，不占任何字节；border-style为固体；border-color为正方形的填充色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.triangle{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color:#e66161;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
图形
2、css实现三角形
思路：宽度width为0；height为0；border-width为直角三角形斜边的一半；border-color里有四个颜色属性，第一个为上--直角三角形内充填充色，第二个为右--直角三角形内填充色，第三个为下--直角三角形内填充色，第四个为左--直角三角形内填充色。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.triangle{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: #000000 transparent transparent transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
图形
代码：
.triangle{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: #000000 #000000 transparent transparent;
}
图形
代码：
.triangle{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: #000000 #f50303 transparent transparent;
}
图形
3、css实现正方形外梯形
思路：还是之前的思路，width为20；高度为20；梯形的短底边为div的width；梯形的长边=width+border-width*2；
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.triangle{
width: 20px;
height: 20px;
border-width:30px;
border-style: solid;
border-color: #000000 transparent transparent transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
图形：
代码：
.triangle{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color:#e66161 #f3bb5b #94e24f #85bfda;
}
图形：
4、css实现pop弹层
思路：利用两个三角形进行拼接，一个是背景色，一个是边框色，然后利用定位重叠在一起，定位要相差一个像素。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
position: relative;
width: 240px;
height: 60px;
line-height: 60px;
background: #e9fbe4;
box-shadow: 1px 2px 3px #e9fbe4;
border: 1px solid #c9e9c0;
border-radius: 4px;
text-align: center;
color: #0c7823;
}
.triangle-border{
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
position: absolute;
left: 30px;
overflow: hidden; }
.border{
bottom:-20px;
border-color: #C9E9C0 transparent transparent transparent;
}
.background{
bottom: -19px;
border-color: #E9FBE4 transparent transparent transparent;
}
</style>
</head>
<body>
<div class="box">
<span>我是利用border属性实现</span>
<div class="triangle-border border"></div>
<div class="triangle-border background"></div>
</div>
</body>
</html>
5、css实现字体渐变色
5.1使用gradient属性
存在的不足：IE浏览器都不支持。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.promotion-floor-title {
text-align: center;
margin: 60px auto 40px;
} .promotion-floor-title .title p {
display: inline-block;
text-align: center;
font-size: 42px;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#2ED4FB), to(#236BEC));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head> <body>
<div class="promotion-floor-title">
<div class="title">
<p>Hello</p>
</div>
</div> </body> </html>
5.2使用svg，支持IE9以及以上
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.promotion-floor-title {
text-align: center;
margin: 60px auto 40px;
} .promotion-floor-title .title {
min-width: 590px;
height: 41px;
display: inline-block;
position: relative;
} .promotion-floor-title .title svg {
margin: 0 223px;
height: 41px;
}
</style>
</head> <body>
<div class="promotion-floor-title">
<div class="title">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
</linearGradient>
<text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
</svg>
</div>
</div>
</body> </html>
6、css实现一条线
思路：使用span标签，不占文档流，使用背景色background是线条颜色，定位使用position=absolute也是脱离原先的文档流，最主要的是设置高度height为1px，设置使用top来定位，以及宽度来限制线的长度。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.promotion-floor-title {
text-align: center;
margin: 60px auto 40px;
} .promotion-floor-title .title {
min-width: 590px;
height: 41px;
display: inline-block;
position: relative;
} .promotion-floor-title .title svg {
margin: 0 223px;
height: 41px;
} .promotion-floor-title .title span {
background: #5672EB;
position: absolute;
height: 1px;
width: 28%;
top: 50%;
} .promotion-floor-title .title .left-line {
left: 0;
} .promotion-floor-title .title .right-line {
right: 0;
} </style>
</head> <body>
<div class="promotion-floor-title">
<div class="title">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
</linearGradient>
<text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
</svg>
<span class="left-line"></span>
<span class="right-line"></span>
</div>
</div>
</body> </html>
7、css使用伪类after实现旋转正方形
思路:在span使用伪类after，第一步设置content为""；第二步增加一个width和height相同的值；第三步使用border边框设定正方形颜色；第四步以及旋转transform等于rotateZ(45deg)，设置兼容到webkit，moz，ms浏览器内核；使用position的absolute脱离原先的文档流；使用top来进行定位。
代码：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.promotion-floor-title {
text-align: center;
margin: 60px auto 40px;
} .promotion-floor-title .title {
min-width: 590px;
height: 41px;
display: inline-block;
position: relative;
} .promotion-floor-title .title svg {
margin: 0 223px;
height: 41px;
} .promotion-floor-title .title span {
background: #5672EB;
position: absolute;
height: 1px;
width: 28%;
top: 50%;
} .promotion-floor-title .title span:after {
content: "";
position: absolute;
top: -5px;
height: 9px;
width: 9px;
border: 1px solid #5672EB;
border-radius: 1px;
transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
} .promotion-floor-title .title .left-line {
left: 0;
} .promotion-floor-title .title .left-line:after {
right: -13px;
} .promotion-floor-title .title .right-line {
right: 0;
} .promotion-floor-title .title .right-line:after {
left: -13px;
}
</style>
</head> <body>
<div class="promotion-floor-title">
<div class="title">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
</linearGradient>
<text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
</svg>
<span class="left-line"></span>
<span class="right-line"></span>
</div>
</div>
</body> </html>
前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）的更多相关文章
- 【前端面试】Vue面试题总结(持续更新中)
Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...
- 前端深入之js篇丨Array数组操作从入门到成神Up Up Up，持续更新中
写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...
- 后端码农谈前端（CSS篇）第四课：选择器补充（伪类与伪元素）
一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...
- CSS（五）：背景、列表、超链接伪类、鼠标形状控制属性
一.背景属性 1.背景属性用来设置页面元素的背景样式. 2.常见背景属性 属性 描述 background-color 用来设置页面的背景色,取值如red,#ff0000 background-ima ...
- 简单的纯css重置input单选多选按钮的样式--利用伪类
由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...
- CSS层叠的问题、标准文档流、伪类选择器
一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性 (font.color.text.) 继承性的权重是0 若 ...
- CSS效果集锦（持续更新中）
高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...
- 自己用的一套reset.css,打算整理一下方便以后用，持续更新中，各位大神，不喜勿喷
*{margin: 0; padding: 0;border:none;}img{vertical-align: top;width: 100%;border: none;}ul,li{list-st ...
- CSS相关知识（持续更新中）
1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...
随机推荐
- 在无向图中找最短桥(tarjan)
题目:hdu 4738 题目意思: 曹操有N个岛,这些岛用M座桥连接起来 每座桥有士兵把守(也可能没有) 周瑜想让这N个岛不连通,但只能炸掉一座桥 并且炸掉一座桥需要派出不小于守桥士兵数的人去 解题 ...
- 003 css总结
1.题目 有哪项方式可以对一个DOM设置它的CSS样式? CSS都有哪些选择器? CSS选择器的优先级是怎么样定义的? CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内? 超链 ...
- maya cmds pymel 选择 uv area(uv 面积) 为0 的面
maya cmds pymel 选择 uv area(uv 面积) 为0 的面 cmds.selectType( pf=True ) cmds.polySelectConstraint( m=3, t ...
- 使用Python开发的POC多线程批量执行小框架
因为代码量非常少,所以就叫“小框架”吧. 接口非常简陋,但是好处是适配POC脚本的时候很灵活,兼容性高,不需要任何研究成本. 简单来说,你按照自己的想法和习惯开发一个POC验证程序,它只要做到三点,即 ...
- 四、自动化平台搭建-Django-如何做验证码
前提:安装包 pip install pillow==3.4.1 1.打开booktest/views.py,创建视图verify_code. from PIL import Image, Ima ...
- C#事件委托概念
事件就是一个狭义的委托,也就是事件是一个用于事件驱动模型的专用委托. 通俗的讲,委托你可以在客户代码中直接调用委托来激发委托指向的函数,而事件不可以,事件的触发只能由服务代码自己触发 也就是说在你的代 ...
- Android中的数据持久化机制
Android中几种最简单但是却最通用的数据持久化技术:SharedPreference.实例状态Bundle和本地文件. Android的非确定性Activity和应用程序生存期使在会话间保留UI状 ...
- 如何在HTML表格里定位到一行数据
业务需求: 在这样一个表格里,通过点击"确认"按钮,收集该行数据,向后台发送请求 解决办法 以该button为锚获取父节点,再由父节点获取各个元素的值 获取子元素又有很多办法,包括 ...
- iphone 屏蔽系统自动更新，消除设置上的小红点
苹果ios系统的更新频率大家应该都知道,一般来说1个月就会来次更新.这一点让很多人讨厌.主要原因还是iPhone会自动下载更新包,然后一直不停地提示你是否安装更新,问题是我们还找不到关闭提醒和关闭自动 ...
- modbus tcp数据报文结构
modbus tcp数据报文结构 请求:00 00 00 00 00 06 09 03 00 00 00 01 响应:00 00 00 00 00 05 09 03 02 12 34 一次modbus ...