jquery - 自定义表单边框

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

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