矩形HTML中的菱形(&A；CSS3) [英] Diamond in rectangle HTML & CSS3

问题描述

我想做一个长方形的钻石。我已经用正方形做过了：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.box {
  width:100px;
  height:100px;
  background:orange;
  z-index:1;
  position:relative;  
}

.box:before {
  position:absolute;
  content:'';
  width:70.71%;
  height:70.71%;
  transform: rotate(45deg);
  background: red;
  top: 15%;
  left: 15%;
}

<div class="box"></div>

但我想这样做：

矩形是响应性的，因此它的大小永远不会相同。有什么想法吗？

非常感谢

推荐答案

您正尝试通过修改矩形来创建菱形。如果你试着用纸做矩形，你就会明白这不是最简单的方法。

您可以使用clip-path：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.diamond {
  background-color: #eee;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  margin: 0 auto;
  text-align: center;
  padding: 2rem;
}

<div class="diamond">I'm a diamond</div>

.剩下的工作就是设置它的宽度、高度(或min-*/max-*)，以便相应地控制其比例。

请注意，在活跃使用的浏览器中，目前只有88%的人使用clip-path是supported，最明显的是缺乏IE和Edge的支持。

如果您需要对它们的支持，唯一的方法是使用两个级别的包装器，并从这些包装器的::before和::after伪构造大纲。

这篇关于矩形HTML中的菱形(&A；CSS3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！