自定义表格边框

Question

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

为什么我不想硬编码，也是因为我有动态内容生成的照片(虽然，固定大小)和一个小文本，我不希望事情出了问题。

有办法吗？

Answer 1

CSS技巧有一篇关于仅使用HTML和CSS的定制形状的优秀文章，其中包括心脏形状。心脏形态由尼古拉斯·加拉格尔提出。

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

}