1. <html>
  2. <body>
  3. <style>
  4. .trlangle{
  5.    width: 0;
  6.    height: 0;
  7.    border-left: 50px solid transparent;
  8.    border-right: 50px solid transparent;
  9.    border-bottom: 100px solid red;
  10. }
  11. </style>
  12.  
  13. <div class="trlangle"></div>
  14. </body>
  15. </html>

2.

  1. <html>
  2. <body>
  3. <style>
  4. .triangle_border_up{
  5.     width:0;
  6.     height:0;
  7.     border-width:0 30px 30px;
  8.     border-style:solid;
  9.     border-color:transparent transparent #333;/*透明 透明  灰*/
  10.     margin:40px auto;
  11.     position:relative;
  12. }
  13. .triangle_border_up span{
  14.     display:block;
  15.     width:0;
  16.     height:0;
  17.     border-width:0 28px 28px;
  18.     border-style:solid;
  19.     border-color:transparent transparent #fc0;/*透明 透明  黄*/
  20.     position:absolute;
  21.     top:0px;
  22.     left:0px;
  23. }
  24. </style>
  25.  
  26. <div class="triangle_border_up">
  27.     <span></span>
  28. </div>
  29. </body>
  30. </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. Java描述设计模式(09)：装饰模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 孙悟空有七十二般变化,他的每一种变化都给他带来一种附加的本领.他变成鱼儿时,就可以到水里游泳:他变成鸟儿时,就可以 ...

  2. 阿里面试实战题3----String,StringBuilder,StringBuffer区别

    String public final class String implements java.io.Serializable, Comparable<String>, CharSequ ...

  3. C# IE环境 - 重置IE（ 注册表）

    IE设置,都可以通过注册表,修改.以下是一些常用的IE设置注册表修改~ 检查证书吊销 /// <summary> /// 检查证书是否吊销 /// </summary> /// ...

  4. springboot之jpa支持

    相关pom依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  5. Flask 教程 第五章：用户登录

    本文翻译自The Flask Mega-Tutorial Part V: User Logins 这是Flask Mega-Tutorial系列的第五部分,我将告诉你如何创建一个用户登录子系统. 你在 ...

  6. Use a Multiline Editor for String Properties 对字符串属性使用多行编辑器

    In this lesson, you will learn how to display a multiline editor for string properties. For this pur ...

  7. 【Untiy】完美解决Untiy Package Manager无限加载的问题

    直接上干货 打开记事本,复制一下zhei个 @echo offset HTTP_PROXY=127.0.0.1set HTTPS_PROXY=127.0.0.1start "" & ...

  8. swift字符串截取实例

    截取字符串 let deviceStr = deviceInfoLabel.attributedText?.string var device  = "" if let len : ...

  9. Spring Boot 2 发布与调用REST服务

    开发环境:IntelliJ IDEA 2019.2.2Spring Boot版本:2.1.8 一.发布REST服务 1.IDEA新建一个名称为rest-server的Spring Boot项目 2.新 ...

  10. RDIFramework.NET敏捷开发框架 ━ 工作流程组件介绍

    RDIFramework.NET,基于.NET的快速信息化系统敏捷开发.整合框架,给用户和开发者最佳的.Net框架部署方案. 1.RDIFramework.NET敏捷开发框架介绍 RDIFramewo ...