代码之家 › 专栏 › 技术社区 › Paul

如何在css中创建不规则的正方形?

css-shapes css3 css

1

Paul · 技术社区 · 7 年前

正在查找用CSS生成此特定形状的代码。。

非常感谢您的帮助!

3 回复 | 直到 7 年前

1

3

Yashu Mittal 7 年前

clip-path

这个 clip-path CSS属性创建定义应该显示元素的哪一部分。更具体地说区域内的部分显示出来,而区域外的部分显示出来隐藏。

请尝试此代码段。

div{
   width: 150px;
   height: 150px;
   -webkit-clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
   clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
   background: pink;
}

<div></div>

2

8

Temani Afif 7 年前

您可以通过一些旋转和透视来完成:

.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}

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

<svg viewBox="0 0 200 200" width=200>
  <polygon points="20,0 150,20 170,130 0,150" fill="#f540a8" /> 
</svg>

也可以使用渐变(但没有透明度):

.box {
  width: 150px;
  height: 120px;
  background: 
    linear-gradient(to top right, transparent 46%,#fff 50%) right/10px 100%,
    linear-gradient(to top right, transparent 46%,#fff 50%) top/100% 10px,
    linear-gradient(to bottom right, transparent 46%,#fff 50%) bottom/100% 10px,
    linear-gradient(to top left, transparent 46%,#fff 50%) left/10px 100%, 
    #f540a8;
  background-repeat:no-repeat;
  margin: 20px;
}

<div class=“box”>
</部门>

3

0

shakogele 7 年前

clip-path: polygon(30px 0 , 250px 0, 200px 300px, 0 0);

请看下面的示例: https://codepen.io/shakogele/pen/ZMZGGK