重点代码：

使用一张图片盖住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. AVL自平衡二叉树

    详细的具体步骤 : 一篇讲的很好博客 AVL,红黑树优先博客-Never 先对二叉树的不平衡结构进行总结: 各种旋转 特别注意字母含义(结构)和其旋转操作之间的区别 二叉树不平衡结构 性质 平衡操作 ...

  2. springboot的最简创建方式

    springboot是目前比较流行的技术栈之一,我在这里写一个springboot工程最简方式 首先开发工具是IDEA,双击打开IDEA,点击Create new Project 进入到这个页面,选择 ...

  3. 微服务时代之自定义archetype（模板/骨架/脚手架）

    1. 场景描述 (1)随着微服务越来越常见,一个大的项目会被拆分成多个小的微服务,jar包以及jar之间的版本冲突问题,变得越来越常见,如何保持整体微服务群jar及版本统一,也变成更加重要了,mave ...

  4. Fire Balls 10——UI界面的制作

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  5. idea中applicationContext-trans.xml中的Cannot resolve bean 'dataSource'...的问题解决

    问题如下: (applicationContext-trans.xml中的部分截图) 先了解问题是怎么出现的: 此处的dataSource是在applicationContext-dao.xml中配置 ...

  6. 明明有class为什么还是报ClassNotFoundException？

    描述 我们修改接口时,习惯发布一个快照版本用于测试.我们的一个服务也是发布了快照版本,然后一个jar程序要依赖这个服务,修改pom文件打包部署后,通过 java -jar 命令执行这个jar程序,然后 ...

  7. 谈谈HTTPS安全认证，抓包与反抓包策略

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信 ...

  8. charles 外部代理设置

    本文参考:charles 外部代理设置 external proxy 外部代理设置 有时候您可能需要使用网络上的代理服务器才能访问Internet. 在这种情况下,您需要为Charles配置外部代理. ...

  9. 为什么Java进程使用的RAM比Heap Size大？

    Java进程使用的虚拟内存确实比Java Heap要大很多.JVM包括很多子系统:垃圾收集器.类加载系统.JIT编译器等等,这些子系统各自都需要一定数量的RAM才能正常工作. 当一个Java进程运行时 ...

  10. pip安装Mysql-python报错EnvironmentError: mysql_config not found

    如下图,安装Mysql-python报错EnvironmentError: mysql_config not found 经过验证,可通过以下方式解决: 从官网下载mysql安装,成功之后输入PATH ...