有没有一种简单的方法可以为HTML <div>创建自定义边框形状？

Question

我正在建立一个带有以网格排列的卡片的网页。

但是，我希望我的卡片具有独特的形状，而不仅仅是矩形。我希望它们的形状是马尼拉夹的形状（如下图所示）

有没有相对简单的方法来制作具有这种形状的div？

Answer 1

我花了大约10分钟时间来做到这一点，因此，如果您有动力去改进它，请随时这样做。可以使用divs并使用CSS进行定位。这只是玩z-index和shape的问题，但是除非您不想因为实现它而给自己留下深刻印象，否则最简单的方法是创建背景图像并将html内容移到其上。

我也不是最好的前端程序员，所以请不要担心！我确信其他人可以通过轮廓边框和其他东西来更好地改善它。

div#panel {
  position: absolute;
  border: 3px solid black;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  background-color: white;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
}

div#box {
  position: absolute;
  border: 3px solid red;
  z-index: 0;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  top: 48.5%;
  left: 50%;
  z-index: ;
  transform: translate(-50%, -50%);
}

div#box2 {
  position: absolute;
  border: 3px solid red;
  border-radius: 10px;
  width: 80px;
  height: 200px;
  background-color: white;
  top: 47%;
  left: 46.9%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

<div id="panel"></div>
<div id="box">
  <p style="padding-left: 5px;"> Some text here</p>
</div>
<div id="box2"></div>

Answer 2

这是仅使用html和css的开始：

body {
  padding: 50px;
}

div {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

div .slant {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  margin: 0 -14px -4px;
  width: 40px;
}

div .slant::before,
main {
  border: 0.2em solid #000;
  background: #000;
}

div .slant::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0.5em;
  left: 0;
  z-index: -1;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: #000;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}

div.left .slant {
  padding: 1.5em 2em 1em 1em;
}

div.left .slant::before {
  transform-origin: bottom left;
}

main {
  display: block;
  margin: -8px 0 30px -14px;
  padding: 1em;
  border-radius: 0 5px 5px 5px;
  width: 200px;
  height: 300px;
}

<div class="left">
  <div class="slant"></div>
</div>
<main>
</main>

Answer 3

您可以使用此形状作为卡的背景图像。删除卡的默认属性，例如background-color，box-shadow ...

HTML：

<div class="main-class">
    <div class="card">
        .....
    </div>
</div>

CSS：

 .main-class .card{
        background-image: url("path");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: transparent;
        box-shadow: none;
    }