如何使div具有CSS伪元素可调整大小

Question

我在css的帮助下为div元素赋予星形，如下所示：

.star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}
.star-six:before {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}

这个css是在javascript的帮助下应用的，我可以将其调整为

$('.star-six').resizable();

这个脚本只会使星形的上三角形可以调整大小，并且当我调整大小时，它也会以梯形形式展开。请帮助我知道如何让整个明星变得可调整。

jsfiddle示例。

Answer 1

我冒昧地猜测.resizable()函数仅应用于第一个元素。尝试在each：

中应用它

$( ".star-six" ).each(function(i, o) {
  $( o ).resizable();
});

Answer 2

也许在CSS中添加“resize：both”会有所帮助。