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

Question

我正在构建一个网页，其中的卡片排列成网格。

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

有什么比较简单的方法可以做出这种形状的div吗？

Answer 1

您可以将此形状用作卡片的背景图片。删除卡片默认值属性如背景颜色、框阴影...

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;
    }

Answer 2

光是这样做我就花了大约 10 分钟，所以如果您有改进它的动力，请尽管这样做。可以用 divs 来做，用 CSS 定位。这只是玩弄 z-index 和形状的问题，但除非你不想为了实现它而给自己留下深刻印象，否则最简单的方法是创建一个背景图像并将你的 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 3

这是一个仅使用 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>

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

Is there a simple way to make a custom border shape for an HTML <div>?

html

css

border