html图片做成菱形,两种css实现菱形的方法以及拓展特效

提到用css实现菱形，在我看来有两种比较便利而且兼容性不错的方法，实现的方式也都不难，但是简单的方法其实也可以做出一些眼前一亮的特效，后面会为大家介绍，下面先来说说两种实现菱形的方式。

方法一：border法

利用 border 来实现2个三角形，将三角形叠在一起，实现一个类似的效果。这是一种不错的方案，兼容性也不错，现在做三角形或者菱形我也经常使用这种方式。我也不过多介绍了，附源码

效果如图

方法二：

CSS3 是经常被提起，但在桌面端又很少被用到的内容。今天这个方案应该也算是一种兼容解决方案吧。实现原理是这样的：

创建一个有 border 的四方形，用 CSS3 transform 作 45 度旋转，这里就不贴出这种实现方法的源码了。目前几乎所有现代浏览器都对transform属性有较好的支持，虽然有的浏览器可能对这个属性的渲染效率比较低，但是也可以正常的显示，唯独IE，又是这个坑，可以使用滤镜这个复杂的方式去hack，实现的css如下：

/* IE滤镜*/

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398,M22=0.7660444431189779)";

当然如果有条件的话，可以使用一些特别的js，使ie中的某些浏览器支持css3属性，有兴趣的童鞋可以去查查资料。

如果不考虑兼容ie，其实利用border做各种三角形、组合的图形都是非常方便的，如果使用好了可以做出一些比较特别的效果，下面就举一个我们官网中的栗子

下面的这一个小三角形就是通过border法实现的，红色范围内其实是两个遮罩层给挡住了，然后中间留出一小部分，使用两个小的div形成的三角形组合，使透明部分形成一个三角形，即做出了这样的效果，是不是很特别呢？

html图片做成菱形,两种css实现菱形的方法以及拓展特效相关推荐

html的水平居中怎么设置,css水平居中怎么设置？两种css水平居中的设置方法
css样式能够实现水平居中,那么css水平居中怎么设置呢?本篇文章将给大家来分享关于css设置水平居中的实现方法. css中可以设置行内元素的水平居中和设置块级元素的水平居中,对于行内元素和块级元素不 ...
qt 加载图片旋转_QT 实现图片旋转的两种方法
第一种方案使用 QPixmap 的 transformed 函数来实现旋转,这个函数默认是以图片中心为旋转点,不能设置旋转的中心点,使用如下: QMatrix matrix; matrix.rota ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
Python：实现图片裁剪的两种方式——Pillow和OpenCV
原文:https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还 ...
android 图片叠加xml,Android实现图片叠加效果的两种方法
本文实例讲述了Android实现图片叠加效果的两种方法.,具体如下: 效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(View v) { // ...
Android点击图片随机,android 设置图片随机出现-两种方式
android 设置图片随机出现-两种方式, 第一种方式:得到图片对应的Drawable实例,通过setImageDrawable(drawable)实现 //ImageView对应的id ivBg ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
pytorch加载自己的图片数据集的两种方法
目录 ImageFolder 加载数据集使用pytorch提供的Dataset类创建自己的数据集. Dataset加载数据集接下来我们就可以构建我们的网络架构: 训练我们的网络: 保存网络模型(这 ...
D3D中2D图片的绘制两种方法
2014/09/19 (转载自:http://blog.csdn.net/rabbit729/article/details/6388703) 想要在D3D中加载2D图片可以使用如下两种方法(我只想到 ...

html图片做成菱形,两种css实现菱形的方法以及拓展特效

html图片做成菱形,两种css实现菱形的方法以及拓展特效相关推荐

最新文章

热门文章