纯css3实现图片三角形排列-爱编程
纯css3实现图片三角形排列
当今是个读图时代。纯大部分网页或多或少都会用到图片。特别是图片较多的网页。图片的布局和排版就非常重要了。今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片。效果图如下：
实现的代码。
&div class='container'&
&div class='wrap'&
&div class='crop'&
&img src='128.jpg'&
&div class='wrap'&
&div class='crop'&
&img src='129.jpg'&
&div class='wrap'&
&div class='crop'&
&img src='130.jpg'&
&div class='wrap'&
&div class='crop'&
&img src='131.jpg'&
&div class='wrap'&
&div class='crop'&
&img src='132.jpg'&
&div class='wrap'&
&div class='crop'&
&img src='133.jpg'&
&div class='wrap'&
&div class='crop'&
&img src='134.jpg'&
&div class='wrap'&
&div class='crop'&
&img src='135.jpg'&
css3代码：
background: #f1f1
.container
margin: 140px auto 0;
font-size: 0;
max-width: 560
-webkit-transform: rotate(45deg) translate3d(0, 0, 0);
-moz-transform: rotate(45deg) translate3d(0, 0, 0);
-ms-transform: rotate(45deg) translate3d(0, 0, 0);
-o-transform: rotate(45deg) translate3d(0, 0, 0);
transform: rotate(45deg) translate3d(0, 0, 0);
display: inline-
-webkit-transition: -webkit-transform 300ms ease-
-moz-transition: -moz-transform 300ms ease-
transition: transform 300ms ease-
width: 100
.wrap:hover
-webkit-transition: -webkit-transform 700ms ease-
-moz-transition: -moz-transform 700ms ease-
transition: transform 700ms ease-
-webkit-transform: rotate(45deg) translate3d(10px, 10px, 0);
-moz-transform: rotate(45deg) translate3d(10px, 10px, 0);
-ms-transform: rotate(45deg) translate3d(10px, 10px, 0);
-o-transform: rotate(45deg) translate3d(10px, 10px, 0);
transform: rotate(45deg) translate3d(10px, 10px, 0);
.wrap:nth-child(even)
-webkit-transform: rotate(225deg) translate3d(30px, 120px, 0);
-moz-transform: rotate(225deg) translate3d(30px, 120px, 0);
-ms-transform: rotate(225deg) translate3d(30px, 120px, 0);
-o-transform: rotate(225deg) translate3d(30px, 120px, 0);
transform: rotate(225deg) translate3d(30px, 120px, 0);
.wrap:nth-child(even) .crop img
-webkit-transform: skew(-20deg, -20deg) rotate(-225deg);
-moz-transform: skew(-20deg, -20deg) rotate(-225deg);
-ms-transform: skew(-20deg, -20deg) rotate(-225deg);
-o-transform: skew(-20deg, -20deg) rotate(-225deg);
transform: skew(-20deg, -20deg) rotate(-225deg);
.wrap:nth-child(even):hover
-webkit-transform: rotate(225deg) translate3d(40px, 130px, 0);
-moz-transform: rotate(225deg) translate3d(40px, 130px, 0);
-ms-transform: rotate(225deg) translate3d(40px, 130px, 0);
-o-transform: rotate(225deg) translate3d(40px, 130px, 0);
transform: rotate(225deg) translate3d(40px, 130px, 0);
width: 160
height: 160
margin: 0;
-webkit-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
-moz-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
-ms-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
-o-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
transform: skew(20deg, 20deg) translate3d(0, 0, 0);
width: 160
height: 160
left: -50%;
margin-top: 36
margin-left: 36
top: -50%;
-webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
-moz-transform: skew(-20deg, -20deg) rotate(-45deg);
-ms-transform: skew(-20deg, -20deg) rotate(-45deg);
-o-transform: skew(-20deg, -20deg) rotate(-45deg);
transform: skew(-20deg, -20deg) rotate(-45deg);
opacity: 0.7;
-webkit-transition: opacity 300ms ease-in-
-moz-transition: opacity 300ms ease-in-
transition: opacity 300ms ease-in-
.crop img:hover
opacity: 1;
注：本文原创文章，转载请注明原文地址：
加入前端爱好者QQ群() ，共同交流进度!
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。终于搞懂了CSS实现三角形图标的原理 - 推酷
终于搞懂了CSS实现三角形图标的原理
网页中经常有一种三角形的图标，鼠标点一下会弹出一个下拉菜单之类的（之前淘宝也有，不过现在改版好像没有了）
之前以为是个png图标背景，后来在bootstrap中看到有一个图标样式叫做caret的用来实现这种效果。没想到用CSS也能实现这个效果。
看了下源码是这样的：
display: inline-
height: 0;
margin-left: 2
vertical-align:
border-top: 4
border-right: 4
border-left: 4
&研究一番之后，发现原理是这样的：
首先，需要把元素的宽度、高度设为0。
然后设置边框样式。最关键的也在这里。
这里我们先做一个实验，如果一个元素具有下列样式：
height: 0;
&效果是什么？没错是个正方形：
因为元素宽度、高度都为0，只有4px的边框，于是变成了上面的效果。
再来，我们把样式改成下面这样：
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
&这会是什么效果呢？可能你不会想到：
这是为什么呢？我们打个比方，有四块红色和黑色的木板代表元素的四个边框，把他们两横两竖重叠起来，这时候他们在二维平面的投影便成了上面的效果。
说到这里，大家该明白了上面的三角形图标是怎么来的了吧：元素没有下边框，而左右边框又是透明的，相当于只有上图中的上面的黑色三角形部分。
所以，如果我们要做倒立三角形、向右的、或者向左的三角形，只需要为三角形底部设置边框，两腰边框透明即可。
height: 0;
border-top: 40
border-left: 40px solid #ff0000;
border-bottom: 40
另外，如果我们把样式改成这样：
height: 0;
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
&将得到如下效果：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致CSS实现三角形 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了47479字，被89人关注，获得了213个喜欢
CSS实现三角形
我们在使用CSS框架的时候，经常会用到下拉框组件，一般该组件里面有个下三角。此外，我们经常用的tooltip，一般也有个三角形，指明方向。初次接触还以为是个图片，审查元素才发现几行CSS代码就可以实现。
我查看了下Bootstrap的，是由一个叫 caret 的类实现的，如下所示：
display: inline-
height: 0;
margin-left: 2
vertical-align:
border-top:
@caret-width-
border-top:
@caret-width-base solid ~"\9"; // IE8
border-right: @caret-width-ba
border-left:
@caret-width-ba
这是一段LESS代码，不过你也能看出点端倪。仔细研究之后，发现原理其实很简单：首先把宽度和高度设置为0，然后设置边框样式，结束。有点懵逼，没关系，我也是。所以我们还是一步一步来分析下。首先看如下代码：
height: 0;
border: 50
这个很容易猜到，你会得到一个黑色的正方形。
不如把四个边框都换个颜色，看看效果如何：
height: 0;
border-top: 50
border-right: 50
border-bottom: 50
border-left: 50
机智的你好像明白了什么......
我们不妨给 caret 设置非零的宽度和高度：
height: 50
border-top: 50
border-right: 50
border-bottom: 50
border-left: 50
就会得到这个图案。
道理很简单，只是我们平时容易忽略而已。我们小时候学习几何的时候，画的图是很细的直线，包括老师也一直强调，做几何题的时候，计算长宽不用考虑直线的长度（准确的说是厚度）。所以我们脑海中也一直保留着这个错误的观点，但是到了编程领域，完全不同了，你画出来的图是一个像素一个像素拼出来的，即使最细的border: 1也是占了一个像素。所以，让我们过分一点，把边框宽度设置成50px，你就可以看到计算机是如何处理这种情况的，而且这种处理也是合乎情理的，边框交接处，一边占用一半的面积。
所以，回归到最初的主题，如何画三角形。我们改一下第三段代码，左右下边框的颜色设置为transparent：
height: 0;
border-top: 50
border-right: 50
border-bottom: 50
border-left: 50
/* 如下代码会更优雅点，得到的效果是一样的 */
height: 0;
border: 50
border-top-color:
所以，你就得到了你想要的三角形了。
结束了吗？还没有，你这样得到的下三角虽然可用，但是本质上占用的空间还是一个正方形，到时候你布局的时候就会发现有点坑，所以我们应该将这个三角形占用的空间尽可能缩小。考虑下第三段代码中，将下边框的长度设置为0，会怎么样？
/* 不设置border-bottom即可 */
height: 0;
border-top: 50
border-right: 50
border-left: 50
怎么样，有意思吧。如果你此时把左边框和右边框的颜色设置成 transparent，岂不是用最小空间实现了下三角。
知道这个原理后，你是不是就可以得到上三角、左三角、右三角等各种三角形。下图中的示例代码，你可以点击获取。
如果你善于思考的话，你会发现稍微改一下第四段代码，你就会得到一个梯形。某种程度上来讲，这可以算CSS的一个奇技淫巧，但是明白实现原理远比实现一个三角形重要得多，有很多有趣的CSS图形，都是基于这个原理实现的。
参考文章：《》
不用打赏，点击喜欢 ↓
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
如果你是程序员，或者有一颗喜欢写程序的心，喜欢分享技术干货、项目经验、程序员日常囧事等等，欢迎投稿《程序员》专题。
专题主编：小...
· 242234人关注
玩转简书的第一步，从这个专题开始。
想上首页热门榜么？好内容想被更多人看到么？来投稿吧！如果被拒也不要灰心哦～入选文章会进一个队...
· 142763人关注
如果你要练习每天写一千字，这就是你打卡的地方。
写作千字文推荐使用卡片创作法：/p/...
· 94737人关注
不用打赏，点击喜欢 ↓
选择支付方式：更多公众号：web_tedu了解达内web前端课程，分享最新互联网信息资讯，web前端行业相关信息最新文章相关推荐搜狗：感谢您阅读用 CSS 实现三角形与平行四边形，本文可能来自网络，如果侵犯了您的相关权益，请联系管理员。QQ:}