<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. Oracle 事务ACID的特性

    1.事务对数据库控制操作 事务(Transaction)是用户定义的一个数据库操作序列,是不可分割的一部分的整体.这些操作要么做,要么不做(原子性).事务是对数据库对进行操作的最基本的逻辑单位,他可以 ...

  2. Slickflow.NET 开源工作流引擎快速入门之二: 简单并行分支流程代码编写示例

    前言:对于急切想了解引擎功能的开发人员,在下载版本后,就想尝试编写代码,完成一个流程的开发和测试.本文试图从一个最简单的并行分支流程来示例说明,如何快速了解引擎代码的编写. 版本:.NET Core2 ...

  3. Python进阶二

    文章目录 函数参数1.位置传递2.名称传递 def f(a,b): f(1,2) f(b=2,a=1) 3.可选参数传递(可选参数必须放在最后)def f(a,b=1) ✔def f(b=1,a) ❌ ...

  4. maven仓库之第二篇

    1. 什么是maven? 它是一个软件开发的管理工具,主要管理的工作是:依赖管理,项目构建. 2. 使用maven的好处? 能够集中管理jar包,提供一键构建. 3. maven的安装及配置 配置:M ...

  5. 蓝色大气简约立体答辩ppt模板推荐

    小编个人非常喜欢这个模版,大气深蓝色,具有科技感,非常适合学生的毕业答辩PPT模板. 模版来源:http://ppt.dede58.com/gongzuohuibao/26496.html

  6. Promise的使用

    Promise的简单认识 Promise 是ES6中对异步编程的一种解决方案,可以避免出现回调地狱 Promise最基本的语法 new Promise((resolve, reject) => ...

  7. 使用Vue-cli3.0创建的项目，如何发布npm包

    使用Vue-cli3.0创建的项目,如何发布npm包 在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建ind ...

  8. GCN 实现3 ：代码解析

    1.代码结构 ├── data // 图数据 ├── inits // 初始化的一些公用函数 ├── layers // GCN层的定义 ├── metrics // 评测指标的计算 ├── mode ...

  9. springmvc的入门

    1. 什么是springMVC? Spring Web MVC是一种基于Java的实现了MVC设计模式的.请求驱动类型的.轻量级Web框架. 2. SpringMVC处理请求的流程 2.1 首先用户发 ...

  10. new和delete创建和释放动态数组

    1.动态创建和释放一维数组 #include<iostream> using namespace std; int main() { int n; cin>>n; //分配动态 ...