用jquery绘制CSS十字形状 [英] drawing CSS cross shape with jquery

问题描述

任何人都可以帮助我使用jquery代码绘制十字（ + ）形状吗？我不想使用CSS样式。想要通过jquery附加所有CSS样式，如下面的代码。

Can anyone help me to draw the Cross(+) shape using jquery code? I don't want to use CSS styles. Want to append all CSS style through jquery like the below code.

 $(symbol).css({
        "width": options.ShapeSize.width,
        "height": options.ShapeSize.height,
        "border-style": "solid",
        "background-color": options.Style.Color,
        "border-color": options.Style.BorderColor,
        "border-width": options.Style.BorderWidth,
    });

我想使用jquery的形状。 jsfiddle示例

I want this shape using jquery only. jsfiddle example

推荐答案

使用 transform：rotate（... deg）

#cross {
   width: 100px;
   height: 100px;
   position: relative;
     -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

或

使用这一块jQuery，并添加其他css属性，如下

OR

Use this piece of jQuery and also add other css properties like this

$("#cross").css({width: "100px",
   height: "100px",
   position: "relative"
})

这篇关于用jquery绘制CSS十字形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！