下面是用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. igmp组播测试环境搭建

    2.4G无线组播测试环境搭建: (1)组播源: VLC 或者 pixstream (2)无线: 2.4G AP (3)客户端PC: VLC播放器 有线直连 无线2.4G PC(组播源pixstream ...

  2. spring上传文件

    在使用spring上传文件的时候,使用的文件接收参数类型为 org.springframework.web.multipart.MultipartFile 如果该参数没有指定@RequestParam ...

  3. ios 获取视频截图

    #pragma mark -- 获取视频截图- (UIImage *)getThumbnailImage:(NSString *)videoURL{     AVURLAsset *asset = [ ...

  4. oracle中REGEXP_SUBSTR方法的使用

    近期在做商旅机票平台,遇到这样一个问题: 有一张tt_ticket表,用来存机票信息.里边有一个字段叫schedule,表示的是行程,存储格式为:北京/虹桥 由于公司位于上海.而上海眼下有两个机场:浦 ...

  5. vue-cli之webpack的proxyTable无效的解决方案

    最近遇到这个需要单页访问跨域后台的问题 可以按照如下设置: proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewrit ...

  6. 步步为营-63-Asp.net-get与post

    1 get Get方式将数据发送到服务端,那么会将用户在表单中的数据放置到浏览器的地址栏中发送到服务器 格式:表单元素name属性的值=用户输入的值 请求地址:http://localhost:594 ...

  7. HDFS上创建文件、写入内容

    1.创建文件 hdfs dfs -touchz /aaa/aa.txt 2.写入内容 echo "<Text to append>" | hdfs dfs -appen ...

  8. 《必须知道.NET》3.OO之美

    3.2 依赖的哲学 3.2.1 本质诠释 "不要调用我们,我们会调用你" 3.2.2 什么是依赖,什么是抽象 "耦合是不可避免的" (1)什么是依赖和耦合 依赖 ...

  9. hdu 4463 有一条边必须加上 （2012杭州区域赛K题）

    耐克店 和 苹果店必须相连 Sample Input42 30 01 00 -1 1 -10 Sample Output3.41 # include <iostream> # includ ...

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

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