我想解决以下简单的css问题,但它有一点困难。如何在css中实现几何div背景形状
我的仪表板屏幕包含当前具有默认方形背景形状和两个字母的一排div。
我需要能够将每个正方形的背景形状更改为表示任务在我们cms中的目标的不同几何形状。
这些形状还需要具有代表状态的不同颜色。
我需要能够在不同的形状和颜色(状态)之间切换。
你可以看到下面的截图,说明我需要做什么。
任何帮助将高度appriciated!
我想解决以下简单的css问题,但它有一点困难。如何在css中实现几何div背景形状
我的仪表板屏幕包含当前具有默认方形背景形状和两个字母的一排div。
我需要能够将每个正方形的背景形状更改为表示任务在我们cms中的目标的不同几何形状。
这些形状还需要具有代表状态的不同颜色。
我需要能够在不同的形状和颜色(状态)之间切换。
你可以看到下面的截图,说明我需要做什么。
任何帮助将高度appriciated!
我很抱歉,我不能让CSS完全一样的屏幕截图,但我尽力了。
可以仅使用纯CSS创建形状。请看一看这个片段
#shapes {
margin-top: 25px;
display: flex;
}
#hexagon {
width: 25px;
height: 13.75px;
background: limegreen;
position: relative;
}
#hexagon:before, #hexagon:after {
content: "";
position: absolute;
border-left: 12.5px solid transparent;
border-right: 12.5px solid transparent;
left: 0;
}
#hexagon:before {
top: -6.25px;
border-bottom: 6.25px solid limegreen;
}
#hexagon:after {
bottom: -6.25px;
border-top: 6.25px solid limegreen;
}
#hexagon:before, #hexagon:after, #diamond, #diamond:after, #star, #star-before, #star-after {
width: 0;
height: 0;
}
#diamond {
border: 12.5px solid transparent;
border-bottom-color: steelblue;
position: relative;
text-indent: -7px;
top: -15.5px;
}
#diamond:after {
content: '';
position: absolute;
left: -12.5px;
top: 12.5px;
border: 12.5px solid transparent;
border-top-color: steelblue;
}
#circle {
padding-top: 3px;
background: turquoise;
border-radius: 12.5px;
}
#square {
background: orange;
}
#trapezoid {
border-bottom: 25px solid red;
border-left: 6.5px solid transparent;
border-right: 6.5px solid transparent;
height: 0;
width: 20px;
}
#tab {
height: 25px;
width: 35px;
background: lightgray;
position: relative;
border-top-right-radius: 25%;
border-bottom-right-radius: 25%;
}
#diamond, #circle, #square, #trapezoid, #tab, #star {
margin-left: 5px;
}
#circle, #square {
width: 25px;
height: 20px;
padding-top: 3px;
}
#square, #tab {
text-align: center;
}
#star {
margin: 5px 0;
position: relative;
display: block;
border-right: 25px solid transparent;
border-bottom: 17.5px solid gray;
border-left: 25px solid transparent;
transform: rotate(35deg);
}
#star:before {
border-bottom: 20px solid gray;
border-left: 7.5px solid transparent;
border-right: 7.5px solid transparent;
position: absolute;
top: -11.25px;
left: -16.25px;
display: block;
content: '';
transform: rotate(-35deg);
}
#star:after {
position: absolute;
display: block;
top: 0.75px;
left: -26.25px;
border-right: 25px solid transparent;
border-bottom: 17.5px solid gray;
border-left: 25px solid transparent;
transform: rotate(-70deg);
content: '';
}
<div id="shapes">
<div id="hexagon">ZY</div>
<div id="diamond">TE</div>
<div id="circle">TE</div>
<div id="square">TE</div>
<div id="trapezoid">TE</div>
<div id="tab">TE</div>
<div id="star">TE</div>
</div>
非常感谢@理查德汉密尔顿,这似乎是正确的答案。感谢这个例子,感谢! – alonblack
没问题!我也想学习如何做到这一点。这也是我的一个项目。我发现这个网站也帮了我一些忙。 https://css-tricks.com/examples/ShapesOfCSS/ –
创建每个状态的类名,然后让每一个背景图片,并将其添加到正确的类名。让这个纯粹的CSS需要一点点努力。 –
新的Shapes模块(像'shape-outside'等属性)可能会有所帮助。 – gcampbell