重点代码：

使用一张图片盖住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. MyBatis 封装Map，返回不同实体的集合对象

    现在有一个需求,就是从100个表中获得任意表中的数据,按照正常的思维模式和处理方式, 我们首先会创建100个实体类(累死!),然后通过resultType一一对应实体类,这种方式简直...  那么我们 ...

  2. 《阿里巴巴Java开发手册1.4.0》阅读总结与心得（四）

    (七)设计规约 1. [强制] 存储方案和底层数据结构的设计获得评审一致通过,并沉淀成为文档. 说明: 有缺陷的底层数据结构容易导致系统风险上升,可扩展性下降,重构成本也会因历史数据迁移和系统平滑过渡 ...

  3. UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 16: illegal multibyte sequence

    报错 UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 16: illegal multibyte sequence ...

  4. https免费证书申请certbot，nginx

    官网:https://certbot.eff.org/ 下载: wget https://dl.eff.org/certbot-auto chmod a+x certbot-auto ./certbo ...

  5. D-Distance_2019牛客暑期多校训练营（第八场）

    题目链接 Distance 题意 1<=nmh,q<=1e5 q个操作 1 x y z往坐标里加入一个点 2 x y z查询距离该点最近的点的距离(曼哈顿距离) 题解 做法一 将要插入的点 ...

  6. CF1005E1 Median on Segments (Permutations Edition) 思维

    Median on Segments (Permutations Edition) time limit per test 3 seconds memory limit per test 256 me ...

  7. 关于重写对象equals方法的问题

    1.==和equals的区别 a.基本数据类型使用  == 进行值的比较 b.引用类型使用 == 进行比较时,直接比较的是对象的存储地址,即两个引用是否指向了同一个对象. c.equals方法是基类O ...

  8. Kafka服务端之网络连接源码分析

    #### 简介 上次我们通过分析KafkaProducer的源码了解了生产端的主要流程,今天学习下服务端的网络层主要做了什么,先看下 KafkaServer的整体架构图 ![file](https:/ ...

  9. Android 网络通信框架Volley(二)

    Volley提供2个静态方法: public static RequestQueue newRequestQueue(Context context) {} public static Request ...

  10. VMware Ubuntu 19最新安装详细过程

    ubuntu可以说是目前最流行的Linux改造版了(如果安卓不算的话),现在的很多服务器都是linux系统的,而自己属于那种前端也搞,后台也搞,对框架搭建也感兴趣,但是很多生产上的框架和工具都是安装在 ...