<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            width:0;

            height:0;

            border:5px solid;

    /*注：border-color中，设置了颜色那个边框就是三角形的底边框*/

            border-color: transparent red  transparent  transparent;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

css做三角形的更多相关文章

  1. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  2. 纯css做三角形形状

    /* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:5px solid tra ...

  3. 用css做三角形

    <html> <body> <style> .trlangle{ width: 0; height: 0; border-left: 50px solid tran ...

  4. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  5. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  6. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  7. 7件你不知道但可以用CSS做的事

    不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如 ...

  8. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  9. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

随机推荐

  1. ORA-12631 / TNS-12631: Username retrieval failed

    From Metalink: Problem Description:====================When your server is not connected to the netw ...

  2. centos7 systemctl命令

    systemctl命令是系统服务管理器指令,它实际上将 service 和 chkconfig 这两个命令组合到一起. 实例: 启动nfs服务:systemctl start nfs-server.s ...

  3. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  4. svg学习（八）polyline

    <polyline> 标签用来创建仅包含直线的形状. <?xml version="1.0" standalone="no"?> < ...

  5. c/c++ 数据结构 链表插入数据代码（二）

    如果参数传递不使用使用指针的指针,也不使用引用. #include <stdio.h> #include <stdlib.h> typedef struct LNode{ in ...

  6. 原生js与css3结合的电风扇

    最近学习了css3,就琢磨做些东西练练手,下面是自己写的一个电风扇,使用了原生js中的定时器和css3的一些属性 <!doctype html> <html lang="e ...

  7. C# 数字带逗号（千分位符、金钱千分位字符）

    首先要明确带了逗号之后  数字就变成字符串了 ,不再是数字了. 昨天做项目的时候需要格式化数字变成带逗号的,本来打算自己写个方法的,后来时间太紧了,就打算从网上查个,查来查去都是要对字符串的位进行操作 ...

  8. android opengl

    引用:http://weimingtom.iteye.com/blog/1616972 二维坐标系变换为原点在左上角(测试用) * GLES * JOGL * LWJGL * libgdx(使用g2d ...

  9. MSSQL优化之索引优化

    一.认识索引 (一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引.簇集索引)和非聚集 ...

  10. TextToSpeech之阅读文字

    创建阅读类 /** * Created by RongGuang on 2014-11-21. * 中文朗读 */ public class ChineseToSpeech { private Tex ...