入驻博客园两个月之后的第一篇随笔,希望能够做到三个原则:

One:不浪费自己的时间,

Tow:不浪费读者的时间,

第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!!


咱们今天来做一个居家旅行必备的小tips,展现前端老前辈的智慧,积淀的文化...

先来一个小口诀【呆会会用到的,不用着急记住它哦】

四方小三角(上,下,左,右)

尖角反方线,给颜色  /*设置边线*/

两边夹角线成透明  /*设置边线*/

参数都相同  /*线的参数都一样*/

给予三条边  /*有三条边哦*/

八方小三角(左上,左下,右上,右下)

左右相反成透明 /*设置边线*/

上下相同给颜色  /*设置边线*/

送你两条边  /*好方便,就两条边*/


哥们上代码:举个梨子

四方来角之(up,up,up上)来个div盒子,是否可以用其他的容器?(哥们没试过,够用就好)

<div class="up"></div>
.up{
position: absolute;; /*这里咱可以视情况而定*/
border-left:30px solid transparent; /*口诀,左,右边成透明*/
border-right:30px solid transparent; /*30px可以控制三角的大小*/
border-bottom:30px solid black; /*口诀,相反线,给颜色*/
width: 0;
height: 0; /*否则小三角在block状态下,会拉满宽度*/
}

结果是:这样的(无视小鼠标)


哥们上代码(2)

先复习一遍口诀,向上向上走...

然后再来,举个梨子(八方来角之“left-top,left-top,left-top左上”)

<div class="left-top"><div/>
.left-top{
position: relative;
border-top: 30px solid lawngreen; /*发现没有上下相同,设置颜色*/
    border-right: 30px solid transparent; /*左右相反,给透明*/
width: 0; /*只有两条边的设置哦*/
height: 0;
}

效果图:(完美哦!!)

其中的口诀,可以完全使用,最主要的好处就是可以不用记住源码,自己手写的css然后在网页中完美显示的感觉就是“这个feel倍爽,倍爽...”

主要的用途:

“导航栏中的小三角指向”

“其他暂时没有发现,哈哈哒..”

如果小白同志看见这篇文章的时候,就联系我吧,菜鸟见小白,哥俩泪汪汪

有幸被大神看见,那是三生有幸,希望指导一二


到这为止,小三角tips的博文就玩了,其中原理可理解也可不理解,网上有一大堆的源码,直接拿过来用就是了,但是不符合咱可贵的极客精神

来一起念一遍“极客精神,极客精神..”

片尾声明:

本文的原理是博主自己的收集理解,经过测试完全没有问题,当然也不排除有其他的方式达到这种效果,各位前端的博友有志同道合的请关注我或者我

要关注你哦

最后的落款:

16-03-10日,

环境还是不错的,

周围室友愉快的斗地主

虎扯:纯css3各方向小三角的制作原理分析的更多相关文章

  1. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  2. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  3. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  4. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  5. css3旋转小三角

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 超可爱 纯CSS3实现的小猪、小老鼠、小牛

    原文:超可爱 纯CSS3实现的小猪.小老鼠.小牛 利用纯CSS3绘制一些人物.动物.风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜 ...

  7. 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  8. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  9. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

随机推荐

  1. WF编译报错

    最近在研究WF的时候,遇到了一个未知的错误,错误信息时这样的 错误 102 扩展“Microsoft.Activities.Build.Validation.ValidationBuildExtens ...

  2. CC++初学者编程教程(5) 安装codeblocks软件开发环境

    Code::Blocks 是一个开放源码的全功能的跨平台C/C++集成开发环境. Code::Blocks是开放源码软件.Code::Blocks由纯粹的C++语言开发完成,它使用了蓍名的图形界面库w ...

  3. Android UI ActionBar功能-自定义 Action Bar 样式

    ActionBar的样式官方提供了三种: Theme.Holo Theme.Holo.Light Theme.Holo.Light.DarkActionBar 但不仅仅是这三种,我们还可以自己定义Ac ...

  4. Web前端性能优化——高频触发事件的防抖

    JS 提供了行为层的支持,为用户提供了交互的操作性. 然而,部分事件却常常有意无意的被频繁触发.比方浏览器窗体的 resize 事件.某个元素的 mouseover 事件,假设处理触发事件的回调函数过 ...

  5. git 删除远程主分支及其它操作

    1. 删除远程分支 如果不再需要某个远程分支了,比如搞定了某个特性并把它合并进了远程的 master 分支(或任何其他存放稳定代码的地方),可以用这个非常无厘头的语法来删除它:git push [远程 ...

  6. Nagios利用NSClient++监控Windows主机

    在Nagios的libexec下有check_nt这个插件,它就是用来检查windows机器的服务的.其功能类似于check_nrpe.不过还需要搭配另外一个软件NSClient++,它则类似于NRP ...

  7. jQuery源码笔记——准备

    将变量局部化 作为一个库首要解决的问题就是防止影响全局的变量.自执行匿名函数可以很好的实现这一点. 传入window,undefiend是将全局变量改为局部变量,根据作用域链访问原理,访问更快一些,. ...

  8. linux下的进程、网络、性能监控命令

    进程监控 端口   1)netstat -anp | grep xxx   2)lsof  -i:<port> 句柄    lsof  -n | grep xxxx 线程栈   1)gst ...

  9. Fedora、CentOS install TTF/otf fonts

    Step 1:切换至字体下载目录: [Richard@localhost Downloads]$ ll | grep otf -rw-rw-r--. Richard Richard 7月 RBNo2L ...

  10. Struts2 初体验

    Sturts是一款优雅的,可扩展性很强的框架.它是由Struts开发团队和WebWord团队合作,共同开发的一个新的产品.新版本的Struts2 更加容易使用,更加接近Struts所追求的理念.从开发 ...