下面是用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. jmeter之ip欺骗

    说明:我看有的博客说官方文档是在jmeter2.5以上的版本有此功能的实现~ 我的是2.13版本,也可以实现 . 准备工作: 使用IP欺骗功能必须得本地有多个可用IP,通常普通的PC机只有一个物理网卡 ...

  2. Go语言规格说明书 之 结构体类型（Struct types）

    go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,介绍Go语言的 ...

  3. 面向对象编程其实很简单——Python 面向对象（初级篇）

    出处:http://www.cnblogs.com/wupeiqi/ 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函 ...

  4. poj3666 线性dp

    要把一个序列变成一个不严格的单调序列,求最小费用 /* 首先可以证明最优解序列中的所有值都能在原序列中找到 以不严格单增序列为例, a序列为原序列,b序列为升序排序后的序列 dp[i][j]表示处理到 ...

  5. ASP.NET Global.asax详解【转】

    global.asax是一个文本文件,它提供全局可用代码.这些代码包括应用程序的事件处理程序以及会话事件.方法和静态变量.有时该文件也被称为应用程序文件. global.asax 文件中的任何代码都是 ...

  6. 《转》CXF WebService 开发文档-目录索引

    CXF WebService 开发文档-目录索引 上次介绍了Axis的WebService,现在我们来看看CXF是怎么完成WebService的. Axis1 WebService 在线博文: htt ...

  7. springbank 开发日志 一次因为多线程问题导致的applicationContext.getBean()阻塞

    几天前遇到的这个问题.由于交易是配置的,不同的交易是同一个类的不同实例,所以不可能提前将其以@autowired类似的方式注入到需要的类中 <op:transaction id="Re ...

  8. AngularJS+Node.js+socket.io 开发在线聊天室

    所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...

  9. POJ 3126 Prime Path （素数+BFS）

    题意:给两个四位素数a和b,求从a变换到b的最少次数,每次变换只能变换一个数字并且变换的过程必须也是素数. 思路:先打表求出四位长度的所有素数,然后利用BFS求解.从a状态入队,然后从个位往千位的顺序 ...

  10. Ubuntu 下常用快捷键

    参考链接:Ubuntu终端以及应用下快捷键大全https://linux.cn/article-3025-1.html 桌面常用快捷键 Alt + F1:聚焦到桌面左侧任务导航栏,可按上下键进行导航 ...