<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. Python 从入门到进阶之路（二）

    之前的文章我们对 Python 语法有了一个简单的认识,接下来我们对 Python 中的 if while for 做一下介绍. 上图为 if 判断语句的流程,无论任何语言,都会涉及到判断问题,if ...

  2. golang-结构体与指针

    1.结构体 结构体是一系列具有指定数据类型的数据类型 ,就是一个结构体中存储多个不同类型的数据字段 ,用于创建传递复杂数据结构 结构体可以理解为面向对象的模板 ,但是go并非面向对象 ,结构体只是一种 ...

  3. Django 注意知识点（一）

    本篇概述 Django Admin后台显示 多对多字段(如何) Django 模板 显示 多对多字段(如何) Django 将表单中上传的多对多字段存入数据库 (如何)   Django 上传文件 ( ...

  4. Callable实现JAVA多线程

    最近项目用到一个功能需要实现多线程分发任务且需要任务的返回值,之前一直都是实现Runnable接口,但里面的run方法是返回void的.后来在网上查了下JAVA1.5开始就有了Callable. 下面 ...

  5. 中缀表达式转换为后缀表达式（python实现）

    中缀表示式转换为后缀表达式 需要一个存放操作符的栈op_stack,输出结果的列表output 步骤: 从左到右遍历表达式: 1. 若是数字,直接加入到output 2. 若是操作符,比较该操作符和o ...

  6. linux环境下卸载oracle 11g

    1.停库[oracle@testdb ~]$ sqlplus / as sysdbaSQL> shutdown immediateDatabase closed.Database dismoun ...

  7. Python对MySql增删改查

    pip install pymysql import pymysql db_config = { 'host': '127.0.0.1(ip)', 'port': 3306, 'user': '账号' ...

  8. add to explorer context menu需不需要勾选

    添加到鼠标右键菜单,添加以后,可以直接右键文件,直接选择这个软件打开选择的文件,建议勾选

  9. echarts自定义颜色主题

    1. 进入地址:  https://echarts.baidu.com/theme-builder/ 2. 配置主题 2.1. 可以选择挑选默认方案 2.2 可以进行一些样式配置 2.3 配置背景颜色 ...

  10. Maven跳过测试

    Maven跳过测试 参考 http://maven.apache.org/plugins/maven-resources-plugin/testResources-mojo.html http://m ...