如何在CSS中绘制特定形状？

Question

我在这里有形状作为图像。我不知道如何在CSS中绘制它。

任何人都可以帮我画画吗？ 感谢

Answer 1

尝试以较小的形状打破你的形状。你可以这样做：

1. 画一个正方形作为形状的主体
2. 绘制三个不同大小的三角形，以重叠背景颜色的方块。

通过隐藏方块的某些部分，您可以创建许多新形状。

有关用作构建基块的基本形状的示例，请查看此处（或者只是Google的“css形状”）： http://www.css-tricks.com/examples/ShapesOfCSS/

尽管使用SVG可能对这些形状更有意义，但这是HTML和CSS中的一个示例：http://jsfiddle.net/ozpfgnrm/

/* top shape */
 #div1 {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 150px;
    height: 50px;
    background-color: blue;
}
#div2 {
    position: absolute;
    left: 20px;
    top: 20px;
    border-bottom: 50px solid white;
    border-right: 20px solid transparent;
    height: 0px;
    width: 0px;
}
#div3 {
    position: absolute;
    left: 150px;
    top: 20px;
    border-bottom: 50px solid white;
    border-left: 20px solid transparent;
    height: 0px;
    width: 0px;
}
#div4 {
    position: absolute;
    left: 20px;
    top: 20px;
    border-bottom: 10px solid transparent;
    border-left: 150px solid white;
    height: 0px;
    width: 0px;
}

/* bottom shape to show what is going on */
 #div5 {
    position: absolute;
    left: 20px;
    top: 120px;
    width: 150px;
    height: 50px;
    background-color: blue;
    z-index: 1;
}
#div6 {
    position: absolute;
    left: 20px;
    top: 120px;
    border-bottom: 50px solid red;
    border-right: 20px solid green;
    height: 0px;
    width: 0px;
    z-index: 2;
}
#div7 {
    position: absolute;
    left: 150px;
    top: 120px;
    border-bottom: 50px solid red;
    border-left: 20px solid green;
    height: 0px;
    width: 0px;
    z-index: 3;
}
#div8 {
    position: absolute;
    left: 20px;
    top: 120px;
    border-bottom: 10px solid green;
    border-left: 150px solid red;
    height: 0px;
    width: 0px;
    z-index: 4;
}

<!-- Top shape -->
<div id="div1"></div>    
<div id="div2"></div>    
<div id="div3"></div>    
<div id="div4"></div>

<!-- bottom shape to show what is going on -->
<div id="div5"></div>    
<div id="div6"></div>    
<div id="div7"></div>    
<div id="div8"></div>