方法说明：

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. vs找不到svn源代码管理插件之我见

    使用svn要安装两个文件,一个客户端:TortoiseSVN-1.8.msi,一个插件:AnkhSvn-2.5.msi:两个都安装好之后,在vs的tool(工具)选项卡中,选择自定义,然后选择sour ...

  2. mysql免安装版使用方法

    1.下载并解压mysql免安装版至自定义目录 2.添加环境变量 变量名:MYSQL_HOME 变量值:D:\Program Files\mysql-5.6.11-winx64 即为mysql的自定义解 ...

  3. linux cat more less head tail

    cat 命令: cat filename  查看一个文件的内容cat[选项][文件]... -b  对非空白行进行编号,行号从1开始-n  和nl命令差不多,对所有行(包括空白行)进行编号输出显示-E ...

  4. 【经典dp】 poj 3671

    开一个dp[30010][3]的数组 其中dp[i][j]表示把第i个数改成j最少要花多少次 那么状态转移方程就列出来了: 令a=1 j!=a[i] 0 j==a[i] 那么dp[i][1]=dp[i ...

  5. IE 和 FF 写不同的CSS

    .FireFox 下如何使连续长字段自动换行 众所周知IE中直接使用word-wrap:break-word 就可以了, FF中我们使用JS插入的技巧来解决 <style type=" ...

  6. 删除 win8.1中的网络1，网络2，宽带连接1，宽带连接2等网络记录

    新建txt文本,保存如下内容为reg文档: Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\W ...

  7. mapreduce 顺序组合

    import java.io.IOException;import java.util.StringTokenizer; import org.apache.hadoop.conf.Configura ...

  8. 【转】HBase技术介绍 转载自 http://www.searchtb.com/2011/01/understanding-hbase.html

    HBase简介 HBase – Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群. HB ...

  9. 河南多校大一训练赛 G 硬币

    题目链接:http://acm.hust.edu.cn/vjudge/contest/125004#problem/G 密码:acm Description 宇航员Bob有一天来到火星上,他有收集硬币 ...

  10. Mysql笔记4数据表操作1

    1查看表的结构 (1)show create table +数据库名称 (2)desc+数据库名称 2修改表 (1)表中添加列 alter table 数据库名称 add column addr va ...