今天看了看腾讯的七周年时光轴,发现这个斜角的CSS,研究了半天提出下面代码可以直接实现斜角,不是CSS3哦,那个就太容易了

-webkit-transform:rotate(10deg);

倾斜度后再隐藏直接就可以了,下面要说的更方便实现:

<style type="text/css">
.dot {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-left-width: 0;
border-style: dashed;
border-right-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
</style>
<span class="dot"></span>

效果如下:边缘很清晰的斜角,比做图弄出来的好多了

另外我后来发现通过设置不同方向边线宽度,还可以调整斜角的角度,这个很简单大家自己修改尝试下吧就不赘述啦

纯CSS实现斜角的更多相关文章

  1. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  3. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  4. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  5. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  6. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  8. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  9. 简单而兼容性好的Web自适应高度布局,纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

随机推荐

  1. go语言中sync包和channel机制

    文章转载至:https://www.bytelang.com/article/content/A4jMIFmobcA= golang中实现并发非常简单,只需在需要并发的函数前面添加关键字"Go&quo ...

  2. C语言之带有返回值的函数

    带有返回值的函数 语法: 类型 函数名(参数列表){ 函数体; return 数据; } 例: int getSum(int num1,int num2){ int sum = num1 + num2 ...

  3. hdu1042

    #include"stdio.h" #include"stdlib.h" #include"string.h" #define N 1000 ...

  4. [UWP小白日记-9]页面跳转过度动画(二)

    又打算动手写了 [UWP小白日记-6]页面跳转过度动画 上次写的,这次随着学习的进度使用新的玩法. 最近在搞GIT的学习,结果把好好的项目玩坏,都不知道当时是怎么想的拿在写的APP来玩GIT,害我重写 ...

  5. CentOS 7安装nginx

    CentOS 7安装nginx 参考网上其他文章做的 安装Nginx 我们从nginx官方的RPM源来安装一个预构建的稳定版本的nginx包. rpm --import http://nginx.or ...

  6. VUGEN错误处理函数--lr-continue-on-error

    void lr-continue-on-error(int value);value是脚本运行出错时的取值,具体取值与相应值得含义如下表,在具体使用时,可以取常量名或者常量值代表. 1.设置,选择co ...

  7. SUSE Linux 下redis 的坑

    前面redis服务器安装-SuSE Linux Enterprise Server 11 SP3一章中安装好提示开放防火墙后的一些坑 前面漏了说明redis作为一个高速数据库,在互联网上,对应的安全机 ...

  8. B树、B-树、B+树、B*树详解

    注:本文为个人学习摘录,原文地址:http://www.blogjava.net/supercrsky/articles/185167.html B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿 ...

  9. asp.net mvc 上传附件验证

    1.使用验证特性 [RequiredCollection] public ICollection<IFormFile> Attachments { get; set; } 2.自定义验证特 ...

  10. java的三种构造器

    重叠构造器:不可取: javabeans模式:不可取: Builder模式:可取.