边界是众所周知的，有什么新的东西吗？好吧，我敢打赌，在这篇文章中，有很多你不看永远不知道的东西！ 不仅可以用CSS3来创建圆角，使用原有CSS一样可以显示自定义图形。这是正确的（有待考究）；在过去，没发现这种技术之前，我们可能使用背景图像定位来显示一个园或箭头。幸运的是，我们能放下PS图象处理软件了。 基础 你可能很熟悉边的最基本用法。 1 borde...
请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：<div id=”demo”></div> 这是一道去年的百度笔试题。 涉及定位、三角形、伪元素。 下面是我的解答以及一些知识概述，都在程序里了。 <!DOCTYPE html> <html lang="en"> <head>...
一、三角形 如下图，通过设置 border 的大小和颜色可以形成四个三角形： 上图对应的代码为： /*三角形*/ .triangle{ 0; height:0; border-top:100pxsolidgreen; border-right:100pxsolidred; border-bottom:100pxsolidblue; border-lef...
如何实现下图所示的平行四边形布局效果？ 一、skewX的局限 一提到平行四边形，条件反射般的就会想起CSStransform中的skew()/skewX()/skewY()方法，可以让元素斜切，从而实现平行四边形效果 然而，一开始的布局不仅后面的白色背景形成平行四边形，整段文字内容也按照平行四边形的格式进行了排版，如果文字内容也应用skewX，所有文字内...
笔记： 原理就是：宽高为零，单独设置border的宽度，然后上右下左，根据需要选择三角形的方向，比如选向上箭头，其他右、下、左设置为透明； 然后放在下边，用margin-top：-10px 放上去。 /**向下的三角**/ .sanjiao_down{ 0; height:0; overflow:hidden; fo...
图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。 1、正方形 最终效果： CSS...
css3的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。 这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。 1. 我们要将该 div 的 width 和 height 都设置为...