方法说明：

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. 【重大bug】viewpager使用的时候加载数据应该在setOnPageChangeListener里加载

    [重大bug]viewpager使用的时候加载数据应该在setOnPageChangeListener里的onPageSelected里加载,我说怎么首页有数据,第二页就是空白,就是加载了但是数据不显 ...

  2. Linux 查硬件配置

    一:查看cpu more /proc/cpuinfo | grep "model name" grep "model name" /proc/cpuinfo 如 ...

  3. Inno Setup入门（十九）——Inno Setup类参考（5）

    : Install Setup 2013-02-02 11:29 377人阅读 评论(0) 收藏 举报 单选按钮 单选按钮在安装中也很常见,例如同一个程序可以选择安装不同的性质的功能,例如选择32位或 ...

  4. zf-关于评价器的开关所在的配置文件，与代码如何修改。

    web.xml文件  把true改成false就是关

  5. HDU 1022 Train Problem I 用栈瞎搞

    题目大意:有n辆火车,按一定的顺序进站(第一个字符串顺序),问是否能按规定的顺序出站(按第二个字符串的顺序出去),如果能输出每辆火车进出站的过程. 题目思路:栈的特点是先进后出,和题意类似,还有有一种 ...

  6. boost库之graph入门

    #include <boost/graph/undirected_graph.hpp> #include <boost/graph/adjacency_list.hpp> us ...

  7. POJ3264/RMQ

    题目链接 /* 询问一段区间内的元素差值最大是多少,用RMQ维护一个最大值和一个最小值,相减即可. */ #include<cstdio> #include<cstring> ...

  8. MVC工作流程

    1  浏览者 => 调用控制器,对它发出指令 2 控制器  => 按照指令选取一个合适的模型 3 模型    =>  按控制器指令取出相应的数据 4 控制器 =>  按指令选取 ...

  9. android 内存优化一

    常见内存泄露原因 Context对象泄漏 1.如果一个类持有Context对象的强引用,就需要检查其生存周期是否比Context对象更长.否则就可能发生Context泄漏. 2.View持有其创建所在 ...

  10. Win7下配置Django+Apache+mod_wsgi+Sqlite

    搭建环境: win7 64位 Django 1.8.5 Apache2.4.17 mod_wsgi_ap24py27.so Python2.7.9 1 安装Apache 下载Apache Haus版, ...