方法说明：

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. jni开发中的常见错误

    * java.lang.UnsatisfiedLinkError: Native method not found: 本地方法没有找到 * 本地函数名写错 * 忘记加载.so文件 没有调用System ...

  2. VS2005--设置Release模式下调试

    今天初略看了下,所谓Release和Debug只是大家和编译器约定的一些生成规则而已,所以调试是无所谓Release和Debug的,只是由于生成的规则不同,可能Release的一些调试结果没Debug ...

  3. Qt使用中碰到的问题

    1.发现table第一列在切换后变黑,或多了行数. 一般是编译出来的.exe文件所使用的qt的dll不匹配造成的.一定要使用编译时,所使用的那个版本的qt的dll.

  4. java regex possissive relunctant

    Java正则表达中Greedy Reluctant Possessive 的区别 分类: java 2015-01-16 00:28 1588人阅读 评论(9) 收藏 举报 正则表达式Java 目录( ...

  5. org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for property named '__frch_lableId_0' in 'class com.cd.entity.Page'

    #号改为$即可

  6. idea 端口占用

    netstat -anp | grep 8080 lsof -i:8080 查看8080端口被什么进程占用 kill (-s 9) 12903 -s 9 强制 尽快 12903 上面查出的 PID 其 ...

  7. Linux下安装php开发框架yaf

    yaf框架中文手册:http://yaf.laruence.com/manual/index.html yaf手册:http://www.php.net/manual/en/book.yaf.php ...

  8. php杂乱

    //    //    if ( $_GET['action'] == 'search' ) {//        $_clean = array();//        $_clean['stype ...

  9. jquery 功能强大的下拉菜单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  10. lucene的两种分页操作

    基于lucene的分页有两种: lucene3.5之前分页提供的方式为再查询方式(每次查询全部记录,然后取其中部分记录,这种方式用的最多),lucene官方的解释:由于我们的速度足够快.处理海量数据时 ...