突然想起搞一把三角形。

简单来说：

建一个div  宽度、高度设为0

添加两个样式：

border 和 border-color

如果需要一个三角形把其他边框都设为透明 transparent

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>CSS实现三角形</title>

     <style media="screen">

       .triangle{

         width:0;

         height:0;

         border:50px solid white;

         border-color：red transparent transparent transparent;

       }

     </style>

   </head>

   <body>

     <div class="triangle"></div>

   </body>

 </html>

CSS实现三角形的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  4. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  5. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  6. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  7. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  8. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  9. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

随机推荐

  1. python——SQL基本使用

    终于学到数据库操作了,这意味着什么?以后再也不用从文件里读写数据了,过程实在太复杂了~~~为了纪念这个激动人心的时刻,一定要写一篇博客! 使用mysql数据库——增 插入一条数据 首先,还是先解释一下 ...

  2. 在VMware8.0.4安装centos6.3出现蓝屏，显示“anaconda: Fatal IO error 104 (Connection reset by peer) on X server :1.0. install exited abnormally [1/1]”？

    解决方案:在创建虚拟机时选择“自定义(高级)”,然后点击“下一步”,在弹出的对话框中,在硬件兼容性该项选择 Workstation6.5-7.x.如果创建虚拟机时选择“标准”,默认的硬件兼容性将是Wo ...

  3. List接口、Set接口、Map接口的方法

    一.Collection接口中的方法介绍 int size();返回此Collection中的元素数 boolean isEmpty(); 判断是否为空 boolean containsAll(Col ...

  4. java基本输入输出练习

    java获取用户的输入分两种,一种是字符的输入,一种是整行的输入,要用到java.io包.对于字符输入来说,使用System.in方法可以输入字符:对于整行的输入,可以使用Scanner类的方法获取整 ...

  5. 通过JS检测360浏览器

    如何通过JS检测360浏览器? 尝试了一大堆方法,网上大多数办法都是通过navigator.userAgent来判断,这可能在几年前是行得通的,现在360userAgent输出来跟谷歌除了版本号其余一 ...

  6. java 文件按行读取

    /*代码写的可能有点累赘里面的好多东西写的不太好 还望各位大佬能提点一二,不胜感激*/package com.zzp.fileopration;import java.io.*;/** * Creat ...

  7. IOS9 Swift

    Swift 2.0发布:即将开源,支持Linux [日期:2015-06-09] 来源:infoq  作者:Linux [字体:大 中 小]     在6月9日凌晨举行的WWDC 2015全球开发者大 ...

  8. 远程线程DLL注入64位进程

    int main() { BOOL bFlag = FALSE; char *szDllName = "MSGDLL.dll"; //bFlag = EnablePrivilege ...

  9. Bootstrap学习应用

    1.栅格式布局:     栅格只有12格  主要用于没有设计经验,自行设计网页. 起步:     导入一个CSS文件 和两个JS文件  BOOTATRAP.MIN.CSS  ---   /*IE(ht ...

  10. 如何导出FlashFXP的站点配置文件

    打开FlashFXP安装文件的目录,找到Sites.dat文件,将其复制出来,放到你新的FlashFXP安装的目录即可