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

Question

我这里的图片是形状。我不知道如何在 CSS.

中绘制它

谁能帮我画一下？谢谢

Answer 1

试着把你的形状分解成更小的形状。你可以这样做：

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

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

有关用作积木的基本形状的示例，请查看此处（或仅 Google 用于 'css shapes'）： 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>

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

How to draw a specific shape in CSS?

css

shape

draw

css-shapes