<!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. angularJS支持的事件

    AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ...

  2. http session 基础知识

    因为Http的无接连,无状态,所以造就了Cookie,Session的诞生. Session也是类似Cookie一样的功能,用于记录客户端浏览器与服务器端交互的会话状态.它与Cookie的重要区别是: ...

  3. cocos2d-x场景切换动画

    void StartScene::beginGame() {     CCLog("beginGame");          //CCTransitionScene *trans ...

  4. [Android Tips] 12. How to Create a Dash Line Shape

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  5. 20145320 《Java程序设计》第6周学习总结

    20145320 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 流(Stream)是对「输入输出」的抽象,注意「输入输出」是相对程序而言的 10.1 Input ...

  6. JavaScript挑战复杂报表——1总述

    今天用自己写的库完成了一个40列填报报表的前后台调试,所花费的时间超过预期很多.遇到的坑有:ajax回调函数写错导致循环调用,没有考虑到java的request.getParameter()方法读入数 ...

  7. LaTeX插入图片方法 Inserting Images

    Inserting Images Images are essential elements in most of the scientific documents. LATEX provides s ...

  8. C# App.config文件配置数据的读写

    添加程序集引用  System.configuration.dll 和命名空间 using System.Configuration; 读: ConfigurationManager.AppSetti ...

  9. linux中非root用户使用wireshark进行抓包

    开始的时候我是在终端中使用sudo 命令打开 wireshark 的,因为如果不这样的话 wireshark 就没法抓包啊.偶尔抓一次包就使用这样的方式提权. 今天使用 wireshark 的时候特意 ...

  10. Openstack安全规则说明

    openstack的安全规则,主要是在网络控制器,nova-network中进行的端口限制,所以我们需要对规则进行定制. 定制通用安全组规则 通用安全组规则主要包括2个,1是支持ping的icmp协议 ...