两种css实现菱形的方法以及拓展特效

思维新建站官网：jz.inspinovation.com

文|鲁掌柜

提到用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形成的三角形组合，使透明部分形成一个三角形，即做出了这样的效果，是不是很特别呢？

作步骤

1、打开一篇具有原始数据的WPS工作表，在功能区选择“插入”选项卡，单击“形状”图标，在出现的下拉按钮中选择插入一个形状，小编在这里插入“菱形”；

软件版本：
软件大小：
软件授权：
适用平台：VistaWin7
下载http://dl.pconline.com.cn/download/1602.html

2、选中插入的“菱形”，然后单击鼠标右键，在弹出的快捷菜单中选择“设置对象格式”命令；

3、在“设置对象格式”的对话框中我们将填充颜色设置为“无填充颜色”然后单击“确定”；

4、此时你会看到我们插入的图形已经变成了透明色，然后我们选中整个表格，同时按住键盘上的“Ctrl+c"进行剪切；

5、然后把剪切的表格通过键盘上的“Ctrl+v”粘贴到我们的图形里边，然后选择插入的图形，单击“效果设置”选项卡，选择“三维效果”中的第二个效果样式；

6、返回到工作表中就可以看到我们设置的三维效果的表框了；

提示：在把表格粘贴到我们的图形的过程中的时候，有时候需要我们选中图形进行调整，把它调到适合整个表格的最佳效果，另外我们还可以在“效果设置”选项卡中通过“颜色”选项组来进行图形的颜色设置。

图片裁切为菱形是一种常见的设计手法，那么怎么在CSS中实现呢？

基于变形的方案

把图片用一个div包裹起来，然后rotate一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      display: flex;
      justify-content: center;
      align-content: center;
      padding: 100px;
    }
    .picture{
      width: 300px;
      transform: rotate(45deg);
      overflow: hidden;
      border: 1px red solid;
    }

    .picture >img{
      max-width: 100%;
      transform: rotate(-45deg);
    }
  </style>
</head>
<body>
  <div class="picture">
    <img src="../img/cat.png" alt="">
  </div>
</body>
</html>

从上图中我们可以看到，它并没有一步到位地直接达到我们期望的效果，而是成了一个八角型。

max-width：100%，会被解析成.picture边长。但是我们想让图片的宽度与容器的对角线相等，而不是与边长相等。所以我们可以把max-width的边长设置为√2x100% + 100% = 142%。但是这里用scale()把变形样式放大会更合理，因为scale是以中心点进行缩放，而通过width是通过左上角为原点进行缩放。

    .picture >img{
      max-width: 100%;
      transform: rotate(-45deg) scale(1.42);
    }

剪裁路径方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img {
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
  </style>
</head>
<body>
  <img src="../img/cat.png" alt="">
</body>
</html>

polygon() - 多边形，它允许我们用一系列（以逗号分隔的）坐标点来指定任意的多边形，我们甚至可以使用百分比值，它们会解析为元素自身的尺寸。

还可以做动画：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img {
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      transition: 1s clip-path;
    }

    img:hover{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

  </style>
</head>
<body>
  <img src="../img/cat.png" alt="">
</body>
</html>

在线咨询

上一篇：“如何用JavaScript发送HTTP请求？”
下一篇：Excel VBA 如何将表格发布成网页，这个功能的确强大

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

两种css实现菱形的方法以及拓展特效

基于变形的方案

剪裁路径方案

您的项目需求