<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. Spring 框架基础(02)：Bean的生命周期，作用域，装配总结

    本文源码:GitHub·点这里 || GitEE·点这里 一.装配方式 Bean的概念:Spring框架管理的应用程序中,由Spring容器负责创建,装配,设置属性,进而管理整个生命周期的对象,称为B ...

  2. JAVA描述算法和数据结构(01)：稀疏数组和二维数组转换

    本文源码:GitHub·点这里 || GitEE·点这里 一.基本简介 1.基础概念 在矩阵中,若数值为0的元素数目远远多于非0元素的数目,并且非0元素分布没有规律时,则称该矩阵为稀疏矩阵:与之相反, ...

  3. 利用重写R3环的ReadProcessMemory来防止恶意程序钩取

    访问这里---> Windows系统调用中API的三环部分(依据分析重写ReadProcessMemory函数)

  4. RabbitMQ的高级特性概念理解

    1.RabbitMQ中的消息如何保障百分之百的投递成功? 答:百分之百的投递成功,方案可以参考下面的2.3. 2.什么是生产者端的可靠性投递? 答:第一步,生产者保障消息的成功发出.第二步,保障Rab ...

  5. dataTable 表插入新行

    DataRow dr = dt.NewRow();//定义新行            dr["sumPrice"] = sumPrice;//对应字段赋值            d ...

  6. Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限

    场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  7. flutter_inner_drawer 使用

    版本: flutter_inner_drawer: "^0.2.2" github:  https://github.com/Dn-a/flutter_inner_drawer 这 ...

  8. [转]UiPath： How to Capture a Mouse Event on Hover Menus?

    本文转自:https://www.uipath.com/kb-articles/how-to-capture-mouse-event-on-hover-menus he Knowledgebase a ...

  9. SAP会计年度变式

       会计年度变式用来确定SAP系统中每个公司的会计记账期间的变式.顾名思议,每个公司的会计年度变式必须与其实际使用的会计年度匹配.     在SAP系统中,每个会计年度最多允许有16个记账期间,其中 ...

  10. bay——Oracle RAC环境下ASM磁盘组扩容.docx

    https://www.cnblogs.com/polestar/p/10115263.html Oracle RAC环境下ASM磁盘组扩容 生产环境注意调整以下参数: +++++++++++++++ ...