重点代码：

使用一张图片盖住div，实现斜角效果

.triangle {

  position: absolute;

  top:;

  left:;

  width: 36px;

  height: 36px;

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0I3MjA1Q0NCMkVGMTFFNkExOEZDOTVGOTRCRTZFNEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0I3MjA1Q0RCMkVGMTFFNkExOEZDOTVGOTRCRTZFNEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQjcyMDVDQUIyRUYxMUU2QTE4RkM5NUY5NEJFNkU0QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQjcyMDVDQkIyRUYxMUU2QTE4RkM5NUY5NEJFNkU0QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pl0Gir0AAAJeSURBVHjaxJjPaxNBFMeT6RLID/KDLMFTD/4NLSi0bExLhUCwUAqehIJ/iAdBT4JgCV6Kx1oPihQUKkUUFCGQ5tCkCIoYo0KbbNbsj7jdzfpdmWIUapPN7M6DBzskM3x23vfNvLdhTdOcEEdrt9s3zk9P38KjBR8QnjCNRuMmYNbxKMBdljA3oJe7u3cuzMxs4jECn3JhQpQqUHNgj7a21q+USk/coRsm6k7gQC7Mg42N+9fX1rYxNKibcJsCOeEARW0ahnHtnCg+/PeHY+cPghAgzNVoNPr4rD+SAMLUV1V1ZRQY33cIMLqh68uJRGJn1DnER5iermnFWDy+M848wScYBclSxM68GXeu4ANMp28YlwFT8TKfMIY5hGYWorFYxesahCHMd0VRCtDM3iTrMAnZYDBo6bq+mE6nDyZdizCA+YxzRoJmDli8HJkQ5mOv15OSyeQHVqEnE8C8h2akVCr1iWViEI8w+7Is5zOZzBfWxwbxALMHAeez2ew3Pw7VsYAsy6pAwAUI+MivK4eMAfMWMIsQsOznhUxGhHnV7XaXcM4ofpcrZASYF51OpyiKohpEJUfOgHn2tdUq5XI5Lai6+9Sa2jTNp5FIZJUW4cwsFY+H/ldTk1MauApgVljDeApZrVZ7d2l+/jZtbQO3v277arX6eqlQuItwHfLqaIUhmOcLklS2bbuL4RFXoHq9vpmfmytTzfyAy9yAms1m+eLs7D3a7P+Euymu8gIKY4uy9AvE7wyE910wpOIxr5CdNPwObfotXhl2AmTScDlDn0ccnkD2cPMQ4my/BBgA7k8XmfPvSJAAAAAASUVORK5CYII=);

}

实现效果图：

css实现斜角效果的更多相关文章

  1. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. C# 使用 Direct2D 实现斜角效果

    Direct2D 是微软新的二维图形 API,可为二维几何图形.位图和文本提供高性能和高质量的呈现.Direct2D 支持硬件加速,无论是绘制速度还是绘制质量,Direct2D 都要比 GDI 和 G ...

  5. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  6. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  7. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  8. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  9. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

随机推荐

  1. Android定时锁屏功能实现（AlarmManager定时部分）

    菜鸟入坑记——第一篇 关键字:AlarmManager 一.AlarmManager简介: 参考网址:https://www.jianshu.com/p/8a2ce9d02640        参考网 ...

  2. POJ - 3660 Cow Contest 传递闭包floyed算法

    Cow Contest POJ - 3660 :http://poj.org/problem?id=3660   参考:https://www.cnblogs.com/kuangbin/p/31408 ...

  3. hdu6437 Problem L.Videos(网络流)

    Problem L.Videos Problem Description: C-bacteria takes charge of two kinds of videos: ’The Collectio ...

  4. HYSBZ - 4016 最短路径树问题 点分治 + 最短路径最小字典序

    题目传送门 题解:首先对于给定的图,需要找到那些从1好点出发然后到x号点的最短路, 如果有多条最短路就要找到字典序最小的路,这样扣完这些边之后就会有一棵树.然后再就是很普通的点分治了. 对于扣边这个问 ...

  5. codeforces 509 D. Restoring Numbers（数学+构造）

    题目链接:http://codeforces.com/problemset/problem/509/D 题意:题目给出公式w[i][j]= (a[i] + b[j])% k; 给出w,要求是否存在这样 ...

  6. 接口请求失败处理,重新请求并限制请求次数.自己封装搞定retry函数

    最近开发一款小程序的时候想到一个问题,如果接口突然挂掉怎么办呢,于是乎想到一个解决办法.接口请求重试功能.并限制请求次数 用最新的async函数语法实现.代码简洁明了. 测试代码如下: functio ...

  7. SpringDataJpa——JpaRepository查询功能（转）

    1.JpaRepository支持接口规范方法名查询.意思是如果在接口中定义的查询方法符合它的命名规则,就可以不用写实现,目前支持的关键字如下. Keyword Sample JPQL snippet ...

  8. 下一个排列（Leetcode31）解读

    本题代码来自Leetcode官方,个人对其理解后,生成自己的注解,以便更好的让读者理解.如有侵权,立即删除! public class Main31 { public static void main ...

  9. windows 服务 安装、卸载

    1.新建项目 选中windows服务 2.添加安装程序 3.修改安装代码 ServiceProcessInstaller processInstall; ServiceInstaller servic ...

  10. 服务器扩容SAN存储

    串行登陆10.10.10.1/2/3/4 1.备份系统信息 mkdir -p /bakinfo df -h > /bakinfo/df.txt_`date +%Y%m%d%H%M%S` ps - ...