<html>

<body>

<style>

.trlangle{

   width: 0;

   height: 0;

   border-left: 50px solid transparent;

   border-right: 50px solid transparent;

   border-bottom: 100px solid red;

}

</style>

<div class="trlangle"></div>

</body>

</html>

2.

<html>

<body>

<style>

.triangle_border_up{

    width:0;

    height:0;

    border-width:0 30px 30px;

    border-style:solid;

    border-color:transparent transparent #333;/*透明 透明  灰*/

    margin:40px auto;

    position:relative;

}

.triangle_border_up span{

    display:block;

    width:0;

    height:0;

    border-width:0 28px 28px;

    border-style:solid;

    border-color:transparent transparent #fc0;/*透明 透明  黄*/

    position:absolute;

    top:0px;

    left:0px;

}

</style>

<div class="triangle_border_up">

    <span></span>

</div>

</body>

</html>

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

  1. 纯css做三角形图标

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

  2. css做三角形

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 纯css做三角形形状

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

  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. scrapy在pycharm配置启动(无需命令行启动)

    一.新建文件 run.py这个名字随意哈 方法一. from scrapy.cmdline import execute execute(['scrapy','crawl','爬虫程序名字','-a' ...

  2. 机器学习pipeline总结

    # -*- coding: utf-8 -*- """scikit-learn introduction Automatically generated by Colab ...

  3. iOS常用算法之单链表查找倒数第n个节点(图解)

    拿到题目, 首先要先了解链表数据结构, 如下图: 常规思路: 利用数组, 遍历整个单链表, 将每个节点装入数组中, 最终拿到数组根据索引(数组长度-1-n)就得到了倒数第n个元素, 这里要注意从数组中 ...

  4. c程序内存检测工具 - Valgrind

    常用C程序内存泄露检测工具 https://blog.csdn.net/u012662731/article/details/78652651

  5. Linxu：进程的管理与进程的延迟性&周期性调度

    进程的延迟与周期调度 进程的概念 进程:开始执行但是还没有结束的程序的实例 程序:包含可执行代码的文件 进程由程序产生,是一个运行着的.要占系统资源的程序,进程不等于程序. 进程分为:交互进程.批处理 ...

  6. Delphi 任务栏中不显示窗口

    目的: 1. 窗口不在任务栏显示. 2. 窗口不显示在Alt+Tab的切换列表中. 3. 在任务管理器的应用程序列表中不显示. 示例: type TAppWndBrowser = class( TFo ...

  7. acwing 835. Trie字符串统计

    地址  https://www.acwing.com/problem/content/description/837/ 维护一个字符串集合,支持两种操作: “I x”向集合中插入一个字符串x: “Q ...

  8. testng.xml文件的配置

    ------Web自动化测试之Webdriver+TestNG--从零到熟练(系列) TestNG用来管理测试用例的是testng.xml配置文件,我们可以通过配置这个文件来达到组织测试用例,输出测试 ...

  9. swoole进程间如何通信

    Swoole进程间通信的方式 管道pipe 管道用于进程之间的数据交互,Linux系统本身提供了pipe函数用于创建一个半双工通信管道.半双工的通信方式中数据只能单向流动(一端只读一端只写),只能在具 ...

  10. Hbase内存磁盘大致关系

    转自: https://blog.csdn.net/wuwenxiang91322/article/details/51595771 Hbase内存磁盘关系磁盘数 diskNum磁盘容量 diskCa ...