话不多说上效果图：

css:

font-family: PingFang-SC-Heavy, PingFang-SC;

font-weight: 800;

color: #2160AD;

border-left: 4px solid #165097;

background-image: linear-gradient(45deg,transparent 89%, #fff 5%), linear-gradient(-36deg, #fff 10%, #F5F7FA 11%);

css3实现背景三角形样式的更多相关文章

  1. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  2. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  3. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  4. CSS3之背景剪裁Background-clip

    CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...

  5. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. 认识CSS3新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

  7. CSS3之背景定位原点background-origin

    背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.p ...

  8. 36种漂亮的CSS3网页按钮Button样式

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  9. css3 设置滚动条的样式

    ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-th ...

  10. jQuery和CSS3炫酷GOOGLE样式的用户登录界面

    这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作.username和password输入框採用浮动标签特效. ...

随机推荐

  1. OceaBase 分区表创建技巧

    最近遇在干个核心的金融项目,规模很大,客户主要是用oracle数据库,现在需要适配ob,原来在oracle就是分区表的迁来ob以后需要进行改造. oracle默认使用是堆表(ht),而ob使用的是索引 ...

  2. ansible常用模块的学习

    ansible常用模块列表: 1.file 点击查看代码 2.copy 点击查看代码 3.yum--repository 点击查看代码 4.yum 点击查看代码 5.service 点击查看代码 6. ...

  3. JavaSE 数据类型以及基本转化与包装

    目录 数据类型. 1.基本类型(八个) 数值型 整型类型 byte型:1字节 8bit位 第一位是符号位 null short型:2字节 int 型:4字节 long型:8字节 浮点类型 float ...

  4. B站login-极验逆向

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标网站 https:// ...

  5. jquery的树状菜单

    <body>     <ul>         <li>一级菜单                 <ol>                 <li ...

  6. 使用线程池实现为多个客户端提供Echo服务

    import java.io.*; import java.net.ServerSocket; import java.net.Socket; import java.util.Scanner; im ...

  7. Vue学习：11.了解生命周期

    Vue.js框架为组件设计了一套完整的生命周期,涵盖了从创建到销毁的全过程.这些生命周期钩子函数(lifecycle hooks)允许开发者在特定的阶段执行自定义逻辑,以便更好地管理组件的状态和与其交 ...

  8. c++ win32 纤程

    Win32纤程是一种轻量级的协程机制,它能够在同一个线程中实现多个线程执行的效果,从而提高了程序的并发性和可伸缩性. 在C++中,可以使用Win32 API中的fiber来实现纤程.以下是一个使用纤程 ...

  9. 高通驱动树中的GPIO详解

    高通驱动树中的GPIO详解 reference:https://blog.csdn.net/baidu_37503452/article/details/80257441 Drive Strength ...

  10. Spring MVC 获取三个域(request请求域，session 会话域，application 应用域)对象的方式

    1. Spring MVC 获取三个域(request请求域,session 会话域,application 应用域)对象的方式 @ 目录 1. Spring MVC 获取三个域(request请求域 ...