各种demo：

1、css实现正方形

思路：width为0；height为0；使用boder-width为正方形的边长的一半，不占任何字节；border-style为固体；border-color为正方形的填充色。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .triangle{
  8.                 width: 0;
  9.                 height: 0;
  10.                 border-width: 30px;
  11.                 border-style: solid;
  12.                 border-color:#e66161;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div class="triangle"></div>
  18.     </body>
  19. </html>

图形

2、css实现三角形

思路：宽度width为0；height为0；border-width为直角三角形斜边的一半；border-color里有四个颜色属性，第一个为上--直角三角形内充填充色，第二个为右--直角三角形内填充色，第三个为下--直角三角形内填充色，第四个为左--直角三角形内填充色。

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .triangle{
  8.                 width: 0;
  9.                 height: 0;
  10.                 border-width: 30px;
  11.                 border-style: solid;
  12.                 border-color: #000000 transparent transparent transparent;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div class="triangle"></div>
  18.     </body>
  19. </html>

图形

代码：

  1. .triangle{
  2.                 width: 0;
  3.                 height: 0;
  4.                 border-width: 30px;
  5.                 border-style: solid;
  6.                 border-color: #000000 #000000 transparent transparent;
  7.             }

图形

代码：

  1. .triangle{
  2.                 width: 0;
  3.                 height: 0;
  4.                 border-width: 30px;
  5.                 border-style: solid;
  6.                 border-color: #000000 #f50303 transparent transparent;
  7.             }

图形

3、css实现正方形外梯形

思路：还是之前的思路，width为20；高度为20；梯形的短底边为div的width；梯形的长边=width+border-width*2；

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .triangle{
  8.                 width: 20px;
  9.                 height: 20px;
  10.                 border-width:30px;
  11.                 border-style: solid;
  12.                 border-color: #000000 transparent transparent transparent;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div class="triangle"></div>
  18.     </body>
  19. </html>

图形：

代码：

  1. .triangle{
  2.                 width: 0;
  3.                 height: 0;
  4.                 border-width: 30px;
  5.                 border-style: solid;
  6.                 border-color:#e66161 #f3bb5b #94e24f #85bfda;
  7.             }

图形：

 4、css实现pop弹层

思路：利用两个三角形进行拼接，一个是背景色，一个是边框色，然后利用定位重叠在一起，定位要相差一个像素。

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .box{
  8.                 position: relative;
  9.                 width: 240px;
  10.                 height: 60px;
  11.                 line-height: 60px;
  12.                 background: #e9fbe4;
  13.                 box-shadow: 1px 2px 3px #e9fbe4;
  14.                 border: 1px solid #c9e9c0;
  15.                 border-radius: 4px;
  16.                 text-align: center;
  17.                 color: #0c7823;
  18.             }
  19.             .triangle-border{
  20.                 width: 0;
  21.                 height: 0;
  22.                 border-width: 10px;
  23.                 border-style: solid;
  24.                 position: absolute;
  25.                 left: 30px;
  26.                 overflow: hidden;
  27.  
  28.             }
  29.             .border{
  30.                 bottom:-20px;
  31.                 border-color: #C9E9C0 transparent transparent transparent;
  32.             }
  33.             .background{
  34.                 bottom: -19px;
  35.                 border-color: #E9FBE4 transparent transparent transparent;
  36.             }
  37.         </style>
  38.     </head>
  39.     <body>
  40.         <div class="box">
  41.             <span>我是利用border属性实现</span>
  42.             <div class="triangle-border border"></div>
  43.             <div class="triangle-border background"></div>
  44.         </div>
  45.     </body>
  46. </html>

 5、css实现字体渐变色

5.1使用gradient属性

存在的不足：IE浏览器都不支持。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             .promotion-floor-title {
  9.                 text-align: center;
  10.                 margin: 60px auto 40px;
  11.             }
  12.  
  13.             .promotion-floor-title .title p {
  14.                 display: inline-block;
  15.                 text-align: center;
  16.                 font-size: 42px;
  17.                 background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#2ED4FB), to(#236BEC));
  18.                 -webkit-background-clip: text;
  19.                 -webkit-text-fill-color: transparent;
  20.             }
  21.         </style>
  22.     </head>
  23.  
  24.     <body>
  25.         <div class="promotion-floor-title">
  26.             <div class="title">
  27.                 <p>Hello</p>
  28.             </div>
  29.         </div>
  30.  
  31.     </body>
  32.  
  33. </html>

5.2使用svg，支持IE9以及以上

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             .promotion-floor-title {
  9.                 text-align: center;
  10.                 margin: 60px auto 40px;
  11.             }
  12.  
  13.             .promotion-floor-title .title {
  14.                 min-width: 590px;
  15.                 height: 41px;
  16.                 display: inline-block;
  17.                 position: relative;
  18.             }
  19.  
  20.             .promotion-floor-title .title svg {
  21.                 margin: 0 223px;
  22.                 height: 41px;
  23.             }
  24.         </style>
  25.     </head>
  26.  
  27.     <body>
  28.         <div class="promotion-floor-title">
  29.             <div class="title">
  30.                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  31.                     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  32.                         <stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
  33.                         <stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
  34.                     </linearGradient>
  35.                     <text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
  36.                 </svg>
  37.             </div>
  38.         </div>
  39.     </body>
  40.  
  41. </html>

 6、css实现一条线

思路：使用span标签，不占文档流，使用背景色background是线条颜色，定位使用position=absolute也是脱离原先的文档流，最主要的是设置高度height为1px，设置使用top来定位，以及宽度来限制线的长度。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             .promotion-floor-title {
  9.                 text-align: center;
  10.                 margin: 60px auto 40px;
  11.             }
  12.  
  13.             .promotion-floor-title .title {
  14.                 min-width: 590px;
  15.                 height: 41px;
  16.                 display: inline-block;
  17.                 position: relative;
  18.             }
  19.  
  20.             .promotion-floor-title .title svg {
  21.                 margin: 0 223px;
  22.                 height: 41px;
  23.             }
  24.  
  25.             .promotion-floor-title .title span {
  26.                 background: #5672EB;
  27.                 position: absolute;
  28.                 height: 1px;
  29.                 width: 28%;
  30.                 top: 50%;
  31.             }
  32.  
  33.             .promotion-floor-title .title .left-line {
  34.                 left: 0;
  35.             }
  36.  
  37.             .promotion-floor-title .title .right-line {
  38.                 right: 0;
  39.             }
  40.  
  41.         </style>
  42.     </head>
  43.  
  44.     <body>
  45.         <div class="promotion-floor-title">
  46.             <div class="title">
  47.                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  48.                     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  49.                         <stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
  50.                         <stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
  51.                     </linearGradient>
  52.                     <text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
  53.                 </svg>
  54.                 <span class="left-line"></span>
  55.                 <span class="right-line"></span>
  56.             </div>
  57.         </div>
  58.     </body>
  59.  
  60. </html>

 7、css使用伪类after实现旋转正方形

思路:在span使用伪类after，第一步设置content为""；第二步增加一个width和height相同的值；第三步使用border边框设定正方形颜色；第四步以及旋转transform等于rotateZ(45deg)，设置兼容到webkit，moz，ms浏览器内核；使用position的absolute脱离原先的文档流；使用top来进行定位。

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             .promotion-floor-title {
  9.                 text-align: center;
  10.                 margin: 60px auto 40px;
  11.             }
  12.  
  13.             .promotion-floor-title .title {
  14.                 min-width: 590px;
  15.                 height: 41px;
  16.                 display: inline-block;
  17.                 position: relative;
  18.             }
  19.  
  20.             .promotion-floor-title .title svg {
  21.                 margin: 0 223px;
  22.                 height: 41px;
  23.             }
  24.  
  25.             .promotion-floor-title .title span {
  26.                 background: #5672EB;
  27.                 position: absolute;
  28.                 height: 1px;
  29.                 width: 28%;
  30.                 top: 50%;
  31.             }
  32.  
  33.             .promotion-floor-title .title span:after {
  34.                 content: "";
  35.                 position: absolute;
  36.                 top: -5px;
  37.                 height: 9px;
  38.                 width: 9px;
  39.                 border: 1px solid #5672EB;
  40.                 border-radius: 1px;
  41.                 transform: rotateZ(45deg);
  42.                 -webkit-transform: rotateZ(45deg);
  43.                 -moz-transform: rotateZ(45deg);
  44.                 -ms-transform: rotateZ(45deg);
  45.             }
  46.  
  47.             .promotion-floor-title .title .left-line {
  48.                 left: 0;
  49.             }
  50.  
  51.             .promotion-floor-title .title .left-line:after {
  52.                 right: -13px;
  53.             }
  54.  
  55.             .promotion-floor-title .title .right-line {
  56.                 right: 0;
  57.             }
  58.  
  59.             .promotion-floor-title .title .right-line:after {
  60.                 left: -13px;
  61.             }
  62.         </style>
  63.     </head>
  64.  
  65.     <body>
  66.         <div class="promotion-floor-title">
  67.             <div class="title">
  68.                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  69.                     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  70.                         <stop offset="0%" style="stop-color:#2ED4FB;stop-opacity:1" />
  71.                         <stop offset="100%" style="stop-color:#236BEC;stop-opacity:1" />
  72.                     </linearGradient>
  73.                     <text text-anchor="middle" x="50%" y="50%" dy=".36em" class="text" font-size="3.6rem" fill="url(#grad1)">Hello</text>
  74.                 </svg>
  75.                 <span class="left-line"></span>
  76.                 <span class="right-line"></span>
  77.             </div>
  78.         </div>
  79.     </body>
  80.  
  81. </html>

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

  1. 【前端面试】Vue面试题总结(持续更新中)

    Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...

  2. 前端深入之js篇丨Array数组操作从入门到成神Up Up Up，持续更新中

    写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...

  3. 后端码农谈前端（CSS篇）第四课：选择器补充（伪类与伪元素）

    一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...

  4. CSS（五）：背景、列表、超链接伪类、鼠标形状控制属性

    一.背景属性 1.背景属性用来设置页面元素的背景样式. 2.常见背景属性 属性 描述 background-color 用来设置页面的背景色,取值如red,#ff0000 background-ima ...

  5. 简单的纯css重置input单选多选按钮的样式--利用伪类

    由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...

  6. CSS层叠的问题、标准文档流、伪类选择器

    一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性  (font.color.text.) 继承性的权重是0 若 ...

  7. CSS效果集锦（持续更新中）

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  8. 自己用的一套reset.css,打算整理一下方便以后用，持续更新中，各位大神，不喜勿喷

    *{margin: 0; padding: 0;border:none;}img{vertical-align: top;width: 100%;border: none;}ul,li{list-st ...

  9. CSS相关知识（持续更新中）

    1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...

随机推荐

  1. [３]第二章　C++编程简介

    (本资料均从 internet 上进行收录整理,若要转载,请与原作者联系) 2.1  机器语言.汇编语言和高级语言 程序员用各种编程语言编写指令,有些是计算机直接理解的,有些则需要中间翻译(tranl ...

  2. Pycharm相对路径

    问题: 今天有个程序,明显路径是存在的,但是os.path.exists的返回结果是False. 仔细想了想, 是相对路径的问题. 情况描述: 我的路径是: dir_path = 'data/mark ...

  3. easyUI 创建有复选框的table.datagrid

    table : function(data){ pt.v.table.datagrid({ // singleSelect:true, height:295, columns:[[ {field:'x ...

  4. BZOJ.5305.[HAOI2018]苹果树(组合 计数)

    LOJ BZOJ 洛谷 BZOJ上除了0ms的Rank1啦.明明这题常数很好优化的. 首先,\(n=1\)时有\(2\)个位置放叶子,\(n=2\)时有\(3\)个... 可知\(n\)个点的有标号二 ...

  5. 洛谷.5300.[GXOI/GZOI2019]与或和(单调栈)

    LOJ BZOJ 洛谷 想了一个奇葩的单调栈,算的时候要在中间取\(\min\),感觉不靠谱不写了=-= 调了十分钟发现输出没取模=v= BZOJ好逗逼啊 题面连pdf都不挂了 哈哈哈哈 枚举每一位. ...

  6. markdown 书写文档的框架

    请使用 [MkDocs](http://www.mkdocs.org/)

  7. php 将图片转成base64

    /** * 获取图片的Base64编码(不支持url) * @date 2017-02-20 19:41:22 * * @param $img_file 传入本地图片地址 * * @return st ...

  8. synchronized关键字的详细分析和代码实例

    在Java中,一般都是通过同步机制来解决线程安全问题的,在JDK 5.0之后又新增了Lock的方式来实现线程安全.所以说实现线程安全方式一共有三种方法 方式一: synchronized(同步监视器) ...

  9. Deepin下配置JDK8

    下载JDK 首先在http://www.oracle.com/technetwork/java/javase/downloads/index.html下载对应的JDK 本人下载的是JDK8 解压tar ...

  10. TP框架下载功能

    namespace Home\Controller; use Think\Controller; use Org\Net\Http; class IndexController extends Con ...