下面是用css做小三角形的demo，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>三像素问题</title>
<style type="text/css">

#rec{
/*border: 1px solid transparent;*/
border-top: 100px solid red;
border-left: 100px solid pink;
border-bottom: 100px solid green;
border-right: 100px solid blue;
width: 0px;
}
#box2{
/*border: 1px solid transparent;*/
border-top: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid green;
border-right: 100px solid transparent;
width: 0px;
}
</style>
</head>
<body>
<div id="rec"></div>
<div id="box2"></div>
</body>
</html>

效果图如下：

类名为#rec 的效果：

类名为#box2  的效果：

通过css实现小三角形的更多相关文章

  1. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  2. 用CSS创建小三角形问题（笔试题常考）

    笔试题中经常遇到用CSS实现某个Div边框添加三角形问题,掌握一点,合理利用div的边框,当div有宽有高时,边框就是不起眼的边框,当div的宽高为0时,边框就是一个小方块,把剩下的三个边透明就是神奇 ...

  3. CSS边框外的小三角形+阴影效果的实现。

    ...虽然是一个很小的问题,但其实还是挺实用的. 实现一个边框外的角. 用纯CSS来写. 一开始实现的效果是这个样子的. 但是这个效果没有办法给他附带阴影,所以换了一种写法.实现成了这个样子 想要实现 ...

  4. 用纯css写一个常见的小三角形

    .test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...

  5. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  6. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  7. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

  8. 用CSS3实现带小三角形的div框(不用图片)

    现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...

  9. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

随机推荐

  1. ASP.NET Core Identity 实战（4）授权过程

    这篇文章我们将一起来学习 Asp.Net Core 中的(注:这样描述不准确,稍后你会明白)授权过程 前情提要 在之前的文章里,我们有提到认证和授权是两个分开的过程,而且认证过程不属于Identity ...

  2. gitlab代码仓库迁移

    有的时候我们需要对gitlab上的代码进行迁移,希望在迁移后能保持原有的branch.tag.commit记录等.可以使用以下方式: 1.clone代码到本地. 2.修改remote仓库的地址,添加新 ...

  3. tomcat6和tomcat7管理用户manager配置

    tomcat用户登录文件配置 如果想要对部署在tomcat上的项目进行管理查看,需要在tomcat安装目录conf文件夹下的tomcat-user.xml里添加用户登录权限.具体添加的内容如下: To ...

  4. OneNET麒麟座应用开发之五：获取加速度传感器ADXL345数据

    由于数据采集站基本都安装在野外或者楼顶,安装位置以及震动对检测数据的准确性有一定影响.所以想要有一个位置状态数据,正好发现麒麟作上有ADXL345,这样一个数字输出的加速度传感器.如图中红框所示: 1 ...

  5. JNI和NDK

    作者:十岁的小男孩 QQ:929994365 心之安处即是吾乡 前言 本文试图通过解答以下三个问题来达到学习JNI和NDK的目的.是什么?有什么用?怎么用?文章内容前三节来自下面第一个链接的博主共享, ...

  6. Django整合Keras报错：ValueError: Tensor Tensor("Placeholder:0", shape=(3, 3, 1, 32), dtype=float32) is not an element of this graph.解决方法

    本人在写Django RESful API时,碰到一个难题,老出现,整合Keras,报如下错误:很纠结,探索找资料近一个星期,皇天不负有心人,解决了 Internal Server Error: /p ...

  7. Kafka动态增加Topic的副本

    一.kafka的副本机制 由于Producer和Consumer都只会与Leader角色的分区副本相连,所以kafka需要以集群的组织形式提供主题下的消息高可用.kafka支持主备复制,所以消息具备高 ...

  8. hdu 1025 上面n个点与下面n个点对应连线 求最多能连有多少条不相交的线 （LIS）

    题目大意有2n个城市,其中有n个富有的城市,n个贫穷的城市,其中富有的城市只在一种资源富有,且富有的城市之间富有的资源都不相同,贫穷的城市只有一种资源贫穷,且各不相同,现在给出一部分贫穷城市的需求,每 ...

  9. C# Winform OpenFileDialog 控件

    OpenFileDialog控件又称打开文件对话框,主要用来弹出Windows中标准的[打开文件]对话框. OpenFileDialog控件的常用属性如下. (1)Title属性:用来获取或设置对话框 ...

  10. PHP 数组中取出随机取出指定数量子值集

    #关键:array_rand() 函数返回数组中的随机键名,或者如果您规定函数返回不只一个键名,则返回包含随机键名的数组.#思路:先使用array_rand()随机取出所需数量键名,然后将这些键名指向 ...