每天一个CSS小技巧 - 菱形图片

图片裁切为菱形是一种常见的设计手法，那么怎么在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>

思维新建站官网：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形成的三角形组合，使透明部分形成一个三角形，即做出了这样的效果，是不是很特别呢？

CSS实现棱形链条的Loading特效

这是一个纯CSS实现的Loading特效，包括棱形链条的动画效果。该特效可以被用于网站、应用程序等需要加载时的等待效果。

实现方法

使用CSS3的@keyframes属性实现动画效果。通过调整不同帧的关键帧，可以实现不同的动画效果。在这个Loading特效中，我们使用了transform属性来旋转棱形，以及animation-delay属性来延迟动画的开始时间，从而使得多个棱形可以错开旋转。

在线咨询

上一篇：html开发笔记08- 字体样式与颜色（标签的属性）
下一篇：21.HTML 浮动、定位和显示属性

您的项目需求

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