<!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. Trace-跟踪高消耗的语句需添加哪些事件

    通常接手一台数据库服务器后,我们会开启Profiler跟踪来了解SQL Server的繁忙情况.我们首先会想到的是监控CPU或Duration超过某一阈值的语句/过程.那么所创建的Trace添加哪些事 ...

  2. iOS,iPhone各机型设备号，屏幕宽高，屏幕模式

    //获取设备型号 NSString *DeviceModel= [[UIDevice currentDevice] model]; //获取设备系统版本号 NSString *DeviceIOSVer ...

  3. RDIFramework.NET 框架之组织机构权限设置

    RDIFramework.NET 框架之组织机构权限设置 对于某些大型的企业.信息系统,涉及的组织机构较多,模块多.操作权限也多,对用户或角色一一设置模块.操作权限等比较繁琐.我们可以直接对某一组织机 ...

  4. 定时往oracle插入数据

    1创建存储过程 create or replace procedure job_proc isbegininsert into yy (yid) values (sysdate);end; 2创建jo ...

  5. JAVA NIO系列（四） 选择器

    前面介绍过Channel.Buffer,后面的文章主要讲解Selector的实践以及实现原理,选择器的概念比起通道.缓冲区要复杂一些,并且选择器是NIO中最重要的一部分内容. 为什么使用Selecto ...

  6. 《30天自制操作系统》17_day_学习笔记

    harib14a: 接着上一天的内容,我们来思考一个问题:当所有的LEVEL中都没有任务的时候怎么办?采用前面定时器链表中加入“哨兵”的思路,我们加入一个idle任务,去执行HLT.接下来我们只需要将 ...

  7. Leetcode: Minimum Genetic Mutation

    A gene string can be represented by an 8-character long string, with choices from "A", &qu ...

  8. Web 通信 之 长连接、长轮询(转)

    Web 通信 之 长连接.长轮询(long polling) 基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强 ...

  9. matlab中imresize

    matlab中函数imresize简介: 函数功能:该函数用于对图像做缩放处理. 调用格式: B = imresize(A, m) 返回的图像B的长宽是图像A的长宽的m倍,即缩放图像. m大于1, 则 ...

  10. C#.Net 调用方法，给参数赋值的一种技巧

    C#中可以给参数赋值默认值（其实这种写法有点不太好，有时会使方法的功能太复杂了）。 但是往往有多个默认参数时，有的参数需要使用默认值，有的不使用默认值，这时正常的写法就行不通了，解决方法可参照下边的代 ...