方法说明：

1、将一个div块的内容设置为空(content=" "),

2、设置它的边框（上下左右）颜色为透明（transparent），

3、设置它的左侧边框颜色为pink。

tips：一个没有内容的div的上下左右的边框形状是下面这个样子的：

左右边框是三角形、上下边框是梯形。

具体代码如下：

html：

<body>

    <div class="test"></div>

</body>

css:

<style type="text/css">

  .test{

            content: ' ';

            border:50px solid transparent;

            border-left-color:pink;

            }

</style>

扩展：像下图右侧灰色的三角形可以按照这个方法来做，只要再多加一步，把三角形定位到合适的位置，然后进行翻转（tranform：rotate（））、变形（transform：skew（））就可以了

CSS实现三角形方法二--border+content的更多相关文章

  1. CSS实现三角形方法一--rotate+relative

    方法说明:两个正方形,一个小的,一个大的,将大的正方向进行旋转,然后移动到小的正方形的合适位置,覆盖小正方形的一部分,使小正方形剩余部分为三角形,再把大正方形的背景色改为浏览器窗口的颜色. 用到知识: ...

  2. caret彻底的理解css的三角形【通过border】

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

  3. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  4. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  5. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  6. CSS绘制三角形—border法

    1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形:   CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下 ...

  7. css图形——三角形

    1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...

  8. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  9. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

随机推荐

  1. 运维必备：Oracle自备份精简教程（linux及win）

    Oracle在linux环境下的自动备份 1.自动导出及历史文件删除脚本 su - oracle<<EOF cd /db_backup/databak mv orabak*.* /db_b ...

  2. git 使用总结

  3. Java学习笔记之一

    1.对大小写敏感 2.class,类是构建所有Java应用程序和applet的构建块,Java应用程序中的全部内容都必须放置在类中. 3.类名,没有长度限制,必须以字母开头,可以使字母.数字.下划线的 ...

  4. 介绍两个Android不常用的Drawable：GradientDrawable和 StateListDrawable

    //-------------------------------------------------------------------------------------------------- ...

  5. 移动Web框架:jQuery Mobile VS Sencha Touch

    最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...

  6. 基础-Ajax，json

    ajax是异步交互,也就是说发送请求,到响应回来,页面只是局部刷新. Ajax 步骤: 获取XMLHttpRequest对象 绑定一个回调函数 open send 在回调函数中完成操作. json是一 ...

  7. JS-DOM操作应用高级（二）

    搜索 字符串比较.忽略大小写----大小写转换.模糊搜索----search的使用.split.高亮显示及筛选 toLowerCase() 方法用于把字符串转换为小写 str.search('')   ...

  8. 空间表SpaceList

    比如在建一个成绩管理系统,这时候定义的名字一般都是char szName[20],这样比较浪费,其实不只是定义名字,定义好多变量都这样,并没有体现动态. 此处出现空间表(SpaceList),通过指针 ...

  9. ice grid 第一篇

    关键点: (1)如果想提高并发的话,还是在一个node上对于同一个application开多个server instance. 1.名词解释 .Replica groups A replica gro ...

  10. 设计模式---Manager（管理器）

    设计模式之美:Manager(管理器) 索引 意图 结构 参与者 适用性 效果 实现 实现方式(一):Manager 模式的示例实现. 意图 将对一个类的所有对象的管理封装到一个单独的管理器类中. 这 ...