参考网页：

http://www.jb51.net/article/42513.htm

1 、设置宽高为0

2 、设置4条边框

3 、设置边框颜色border-color如下：

border-color:transparent transparent transparent pink;

transparent 代表透明的意思，按顺时针（上右下左）设置颜色

css 三角形的制作的更多相关文章

  1. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  2. 纯CSS小三角制作

    无关的知识点 ① background-clip 属性规定背景的绘制区域. 1.padding-box:从padding区域(不含padding)开始向外裁剪背景. 2.border-box:从bor ...

  3. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  4. 前端读者 | CSS三角形和饼图

    @羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...

  5. 用 CSS Grid 布局制作一个响应式柱状图

    最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...

  6. PHP全栈开发（八）：CSS Ⅹ 导航栏制作

    学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...

  7. CSS效果：CSS实用技巧制作三角形以及箭头效果

    实现如图所示的三角形图标: html代码如下: <div class="arrow-up"></div> <div class="arrow ...

  8. 用css伪类制作三角形的三种方法

    在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...

  9. CSS三角形制作样式

    .triangle{ display: block; height: 0; position: absolute; width: 0; border: 9px solid; border-color: ...

随机推荐

  1. .net core 的优点

    [1]为什么使用.net core 首先.net core 是一个跨平台的高性能开源框架用具生成基于云连接的Internet的新的应用程序,可以建造web应用程序和服务,lot应用和移动后端,可以在W ...

  2. Java数组总结

    1.1    Arrays      jdk中为了便于开发,给开发者提供了Arrays(在Jdk的Util包中)类,其中包括了很多数组的常用操作.列如快速输出,排序,查找等.      1.1.1   ...

  3. oracle--dump & V$BH

    一,什么是BH BH即Buffer Header,每一个数据块在被读入buffer cache时,都会先在buffer cache中构造一个buffer header,buffer header与数据 ...

  4. 爬虫--XPATH解析

    今天说一下关于爬取数据解析的方式---->XPATH,XPATH是解析方式中最重要的一种方式 1.安装:pip install lxml  2.原理 1. 获取页面源码数据 2.实例化一个etr ...

  5. (转)Heartbeat+DRBD+NFS高可用案例

    原文:http://9861015.blog.51cto.com/9851015/1939521--------------------------------Heartbeat+DRBD+NFS高可 ...

  6. HtmlUnit 开发网络爬虫

    网络爬虫第一个要面临的问题,就是如何抓取网页,抓取其实很容易,没你想的那么复杂,一个开源HtmlUnit包,几行代码就OK啦! 通常在一个页面中会包含别的Url,在别的Url当中又会包含更多的Url. ...

  7. Jquery jqXHR对象的属性和方法

    在 jQuery 1.4 之前(包括1.4),$.ajax() 方法返回的是浏览器原生的 XMLHttpRequest 对象. 从 jQuery 1.5 开始,$.ajax() 方法返回 jQuery ...

  8. Tomcat与Nginx的整合

    Tomcat与Nginx的整合 环境 操作系统:ubuntu 14.04.4 LTS 安装Nginx 有两种方式,一种是使用apt-get命令来安装二进制版本,另外一种是下载源码后自己编译. 二进制安 ...

  9. Oracle 架构

  10. vue-cli中使用stylus

      1.在package.json文件中写入依赖: "stylus-loader": "^2.5.0", "stylus": "0 ...