前端（各种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. ...

随机推荐

SSM框架搭建后在tomcat部署报错lineNumber: 15; columnNumber: 59; 必须为元素类型 "beans" 声明属性 "xmlns"
删除applicationContext.xml中的文件头上的这个就可以<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" &q ...
laravel使用redis队列实践(只需6步,超详细,超简单)
1.配置使用redis队列在.env文件找到QUEUE_DRIVER=sync改成QUEUE_DRIVER=redis redis配置一般不用改如果有密码改.env文件的REDIS_PASSWORD ...
第二次作业-熟悉git
GIT地址 https://github.com/gentlemanzq/yunsuanhomework GIT用户名 gentlemanzq 学号后五位 62320 博客地址 https://w ...
vs编译OpenGL项目，出现无法打开源文件 "gl\glaux.h的解决办法
问题如图: 原因: 缺少编译OpenGL的头文件和库: 解决办法: 1.下载OpenGL的头文件和库: 下载地址:https://download.csdn.net/download/ssagnn23 ...
关于db2处理特殊字段出现异常java.io.charConversionException
记录一下以前遇到的问题在使用db2数据库处理数据的时候,碰到特殊字段,出现的问题 java.io.charConversionException 官方解决方法: db2.jcc.charsetDec ...
ssh登录远程服务器
在终端输入ssh 用户名@IP地址, 比如输入用户名和密码,进入目录,即可查看修改文件,启动服务. 这和安装xshell和filelizza,终端有什么区别? useradd guangbo pas ...
tensorflow 使用 1 常量，变量
import tensorflow as tf #创建一个常量 op 一行二列 m1 = tf.constant([[3, 3]]) #创建一个常量 op 二行一列 m2 = tf.constant( ...
sqlzoo:2
顯示具有至少2億人口的國家名稱. 2億是200000000,有八個零. SELECT name FROM world 找出有至少200百萬(2億)人口的國家名稱,及人均國內生產總值. select n ...
ios开发中的深拷贝和浅拷贝
这是一个老生常谈的话题,面试中也经常被问到,下面总结一下自己的一些心得. 一句话总结: 浅拷贝就是指针拷贝: 深拷贝是对象本身的拷贝: 下面一张抽象的图可以直观的表述出两句话的内涵其实这里还引申出了 ...
批量引用iconfont字体图标到项目
打开https://www.iconfont.cn/网址登录后选择你需要的图标添加到购物车中点击下载代码或者添加到项目后再下载代码,再找到之前下载的的文件,拷贝到项目中

前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）

前端（各种demo）一：css实现三角形，css实现梯形，pop弹层，css伪类before，after使用，svg使用（持续更新中）的更多相关文章

随机推荐

热门专题