<!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. 两种方法解决tomcat的 Failed to initialize end point associated with ProtocolHandler ["http-apr-8080"]

    出现这种原因主要是8080端口被占用了. 解决1: 打开任务管理器看看里面有没有javaw的线程,把它关了再重新启动tomcat看看. 解决2: 修改tomcat /conf /server.xml ...

  2. 正则表达式获取字符串中的img标签中的url链接

    废话不多说直接看代码 JavaScript中的代码: var re = /src=\"([^\"]*?)\"/i; var arr = str.match(re); if ...

  3. NET基础（1）：类型基础

    所有类型都从System.Object 派生,‘运行时’要求每个类型都从System.Object类派生,也就是说,以下两个类型定义完全一致: //隐式派生字Object class Employee ...

  4. 《Node.js开发指南》的少许坑儿~

    由于express升级到3.0,造成这本书看起来more and more蛋疼.记录少许坑儿,方便后来人. 一.node.js在windows下的安装 书中在两处介绍了两种方式,其实现在的node.j ...

  5. 删除MSSQL数据库中所有表

    --删除所有约束 DECLARE c1 cursor for select 'alter table ['+ object_name(parent_obj) + '] drop constraint ...

  6. Bitnami redmine备份升级步骤

    从3.2.1升级至3.3.0,不确定数据库结构是否有变化,主要过程:先停止服务,安装redmine模块,恢复服务. 以下适用于windows操作系统,采用Bitnami安装方式: 1.完整备份 Fol ...

  7. linux bash快捷键

    bash快捷键 CTRL+F 光标向前移动一个字母 CTRL+B 光标向后移动一个字母 CTRL+A HOME CTRL+E END

  8. Linux中执行shell脚本的4种方法

    bash shell 脚本的方法有多种,现在作个小结.假设我们编写好的shell脚本的文件名为hello.sh,文件位置在/data/shell目录中并已有执行权限. 方法一:切换到shell脚本所在 ...

  9. Eclipse安装SVN插件方式简明介绍

    一.Links安装: 推荐使用此种安装方式,因为它便于插件的管理. 在eclipse根目录下新建文件夹links,这样就得到了eclipse\links 在eclipse\links下新建一个link ...

  10. arraylist与linkedlist的区别与性能测试

    /** *arraylist和linkedlist的适用场合. **/ import java.util.List; import java.util.ArrayList; import java.u ...