Question

我在我的网站上为情人节制作主题，并想知道是否有可能制作自定义表格边框，例如一个心脏？当然，我可以在需要的地方放置一个图像，但这太难编码了。

为什么我不想要硬编码也因为我有动态内容生成照片（虽然，固定大小）和小文本，我不希望出现问题。

那么，有办法吗？

Answer 1

CSS Tricks有一篇关于仅使用HTML和CSS的自定义形状的优秀文章，其中包括心形。心脏形状由Nicolas Gallagher建议：

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

虽然听起来很有趣，但它只使用一个元素！

Answer 2

这是一篇很棒的帖子！

以上文章太棒了。

如果您在边框内的内容是固定大小，或者如果您想要一个非常特定的心形而不使用代码，另一个非常安全的选择是使用伪元素添加图像边界。

这些方面的东西：

/* content */

.content {

  position: relative;

}

/* heart wrapper */

.content:before {

  background: url(image/heart.png);
  position: absolute;
  height: 300px;
  width: 300px;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;

}

自定义表单边框

2 个答案: