代码之家 › 专栏 › 技术社区 › jean-max

矩形中的菱形HTML和CSS3

css-transforms css html

jean-max · 技术社区 · 7 年前

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

.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>

但我想这样做:

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

谢谢

2 回复 | 直到 7 年前

sol 7 年前

这种方法使用CSS生成的两个三角形 border .

我觉得你不能用 % 对于 边境 宽度,因此我使用了视口单位。

.box {
  width: 50vw;
  height: 25vw;
  background: orange;
  z-index: 1;
  position: relative;
}

.box:before,
.box:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.box:before {
  border-right: solid 25vw red;
  border-top: solid 12.5vw transparent;
  border-bottom: solid 12.5vw transparent;
}

.box:after {
  right: 0;
  border-left: solid 25vw red;
  border-top: solid 12.5vw transparent;
  border-bottom: solid 12.5vw transparent;
}

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

tao 7 年前

您试图通过修改矩形来创建菱形。如果你用一个纸矩形试一下,你就会明白这不是最简单的方法。

你可以使用 clip-path :

.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-* 对于其中任何一种),以响应地控制其比例。

Do note CSS 剪辑路径 当前为 supported 只有约88%的活跃浏览器缺乏IE和Edge的支持。

如果您需要这些支持,唯一的方法是使用两个级别的包装器并从 ::before 和 ::after 那些包装纸的赝品。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

9 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

9 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

9 月前