<!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. 参数中带有“&”符号问题

    今天写程序时遇到一个问题: /login.do?service=9861.htm?id=117&pageNo=1 这个链接中有两个问号,以至于后台取参数 service的值时把 &pa ...

  2. 史上最臭名昭著五大软件Bug

    在现今数字年代,计算机bug不但困扰着每个程序员,更会无可避免影响我们的生活,小到每个人的衣食住行,大到国家经济,世界局势.随着我们的生活方式渐渐的数字化.互联网化,数字世界的找虫和杀虫就变得越来越重 ...

  3. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  4. input上传按钮 文字修改办法

    解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...

  5. ASP.NET MVC中，怎么使用jquery/ajaxForm上传文件

    ajaxForm插件最好选择:jquery forms plugin. 以下为示例: Ajax.BeginForm @using (Ajax.BeginForm("YourAction&qu ...

  6. ANE 从入门到精通 --- 简单的Whatever

    Flash还是很好的,不过国内没人用. Whatever了. 以下是ANE制作中的一点笔记 分享下 也留作备份 Step1 编写As3 Library package com.eran { impor ...

  7. Ubuntu 安装BCM 43142无线网卡驱动

    ubuntu14.04 安装 bcm43142无线网卡 用命令lspci 查看无线网卡类型 然后下载对应的无线网卡驱动. 之后,使用下列命令安装,即可搜索无线热点了: sudo apt-get ins ...

  8. 【实践】jQuery实现三联联动

    网上看过很多关于联动的jq或js代码,最近班上的前端大神教了我一种比网上还简单的jq联动方法,自己琢磨过之后确实比其他方法更简单更简洁所以在这里分享一下 先上html代码 <div id=&qu ...

  9. mysql复制表结构及检查表、存储过程是否存在

    mysql命令行复制表结构的方法: 1.只复制表结构到新表 CREATE TABLE 新表 SELECT * FROM 旧表 WHERE 1=2  或者 CREATE TABLE 新表 LIKE 旧表 ...

  10. SIP协议栈基础笔记

    //------------------SIP基础------------------------// SIP是基于UDP的协议 UA(user Agent)用户代理 UAC(client)发起SIP ...