html形状怎么写,html – 如何用div里面的CSS写下以下形状？

使用SVG：

在使用SVG时,您可以使用路径和折线元素来绘制所需的形状.正如Paulie_D在评论中指出的那样,SVG是这种复杂形状而不是CSS的更好选择(尽管这也可以用CSS实现).

方法很简单,如下：

>顶部多边形的一个路径元素,通过连接坐标(0,50),(50,0),(100,50)和(50,70)处的点绘制.

>底部多边形的另一个路径元素,通过连接(0,50),(50,70)和(100,50)处的点绘制.

>橙色边框的一条折线元素,只不过是连接(0,50),(50,70)和(100,50)的线.

svg {

height: 100px;

width: 100px;

}

path#top {

fill: gray;

}

path#bottom {

fill: black;

}

polyline#border {

stroke: orange;

stroke-width: 2;

fill: none;

}

使用CSS：

您可以使用2个旋转和倾斜的伪元素来实现所提供的形状.使用毕达哥拉斯定理计算每个伪元素的维数.

使用此方法生成的形状具有响应性,可以适应尺寸的变化.将形状悬停在代码段内以查看其如何适应.

*,

*:after,

*:before {

box-sizing: border-box;

}

#DiamondCenter {

position: fixed;

top: 2%;

left: 48%;

background: #24201a;

height: 40px;

width: 40px;

transform: rotate(45deg);

z-index: 20 !important;

overflow: hidden;

}

#DiamondCenter:after {

position: absolute;

content: '';

bottom: 0px;

left: -1px; /* half the width of border-left */

height: calc(100% / 1.414);

width: calc(100% / 1.414);

background: black;

border-left: 2px solid orange;

transform: rotate(40deg) skewX(-20deg);

transform-origin: bottom left;

}

#DiamondCenter:before {

position: absolute;

content: '';

top: -1px; /* half the width of border-top */

right: 0px;

height: calc(100% / 1.414);

width: calc(100% / 1.414);

background: black;

border-top: 2px solid orange;

transform: rotate(-40deg) skewY(-20deg);

transform-origin: top right;

}

/* Just for demo */

#DiamondCenter{

transition: all 1s;

}

#DiamondCenter:hover{

top: 5%;

height: 80px;

width: 80px;

}

在下面的代码片段中,我为伪元素设置了不同的背景颜色,以说明如何实现形状.

*,

*:after,

*:before {

box-sizing: border-box;

}

#DiamondCenter {

position: fixed;

top: 2%;

left: 48%;

background: #24201a;

height: 40px;

width: 40px;

transform: rotate(45deg);

z-index: 20 !important;

overflow: hidden;

}

#DiamondCenter:after {

position: absolute;

content: '';

bottom: 0px;

left: -1px;

height: calc(100% / 1.414);

width: calc(100% / 1.414);

background: seagreen;

border-left: 2px solid orange;

transform: rotate(40deg) skewX(-20deg);

transform-origin: bottom left;

}

#DiamondCenter:before {

position: absolute;

content: '';

top: -1px;

right: 0px;

height: calc(100% / 1.414);

width: calc(100% / 1.414);

background: skyblue;

border-top: 2px solid orange;

transform: rotate(-40deg) skewY(-20deg);

transform-origin: top right;

}

/* Just for demo */

#DiamondCenter{

transition: all 1s;

}

#DiamondCenter:hover{

top: 5%;

height: 80px;

width: 80px;

}