方法说明：

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. 【转载】CentOS 6.4下PXE+Kickstart无人值守安装操作系统

    [转载]CentOS 6.4下PXE+Kickstart无人值守安装操作系统 转自:CentOS 6.4下PXE+Kickstart无人值守安装操作系统 - David_Tang - 博客园 http ...

  2. c++面试题【转】

    语言部分: 虚函数,多态.这个概念几乎是必问. STL的使用和背后数据结构,vector string map set 和hash_map,hash_set 实现一个栈类,类似STL中的栈.这个题目初 ...

  3. ubuntu setup adb tool

    sudo add-apt-repository ppa:nilarimogard/webupd8sudo apt-get updatesudo apt-get install android-tool ...

  4. java中json数据生成和解析(复杂对象演示)

    1.json简单介绍 1.1 json是最流行和广泛通用的数据传输格式,简称JavaScript Object Notation,最早在JavaScript中使用. 1.2 举个例子,下面是一个jso ...

  5. POJ1556 The Doors 叉积+最短路

    题目大意:求从(0,5)到(10,5)的最短距离,起点与终点之间有n堵墙,每个墙有2个门. 题目思路:判断两点间是否有墙(判断两点的连线是否与某一堵墙的线段相交),建立一个图,然后最短路求出就可以了. ...

  6. UIActivityIndicatorView的详细使用(加载菊花)

    UIActivityIndicatorView实例提供轻型视图,这些视图显示一个标准的旋转进度轮.当使用这些视图时,最重要的一个关键词是小.20×20像素是大多数指示器样式获得最清楚显示效果的大小.只 ...

  7. Co-Debugging JNI with Android Studio and Visual Studio

    Tutorials > Android > Integration with other tools > Co-Debugging JNI with Android Studio a ...

  8. 第一个python实例程序

    #!/usr/bin/python2.7 import os ls = os.linesep fname = raw_input("fname:"); while True: if ...

  9. 关于html5的几个新标签在IE9之前不支持的解决办法

    IE8及之前的浏览器不支持用CSS的方法来使用这些尚未支持的结构元素,为了在Internet Explorer浏览器中也能正常使用这些结构元素,需要使用JavaScript脚本,如下:<scri ...

  10. Hadoop学习笔记—5.自定义类型处理手机上网日志

    转载自http://www.cnblogs.com/edisonchou/p/4288737.html Hadoop学习笔记—5.自定义类型处理手机上网日志 一.测试数据:手机上网日志 1.1 关于这 ...