如何在 CSS 中绘制特定形状？ [关闭]

Question

我在这里有 shape 作为图像。我不会怎么用 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>