Css 如何仅使用一个元素-div制作图片？

设计师设计了这个标志。它需要在各种条件下使用。为了使它尽可能方便，可以使用纯CSS中的单个HTML元素对其进行布局

您不能使用图片（即使通过data:uri）

我尝试使用伪元素，但它不起作用。 注释

• 总宽：180像素
• 总高度：180像素
• 黄色截面高度：90px
• 白色截面宽度：90px
• 圆角半径：9px
• 颜色：
• • 黑色：#0c
• • 黄色：#f8e34b
• • 怀特：#eeedef
• 阴影：#C8C8C8178度

div{
宽度：180px；
高度：180像素；
}
部门：以前{
内容：“；
宽度：180px；
高度：90px；
背景：#f8e34b；
}
部门：之后{
内容：“；
宽度：90px；
左：0；
高度：90px；
背景：#eeedef；
}
部门：之后{
内容：“；
宽度：90px；
高度：90px；
右：0；
背景：#0c；
}

---

您可以使用css伪before和after元素来实现这一点。您的代码是：

div{
宽度：180px；
高度：180像素；
背景色：#eeedef；
位置：相对位置；
边界半径：8px；
溢出：隐藏；
}
div：：之前{
内容：''；
宽度：180px；
高度：90px；
排名：0；
左：0；
背景色：#f8e34b；
位置：绝对位置；
边框左上半径：8px；
边框右上角半径：8px；
盒影：0 3px 10px#c8c8；
}
div：：之后{
内容：''；
宽度：90px；
高度：90px；
底部：0；
右：0；
背景色：#0c；
位置：绝对位置；
边框右下半径：8px；
}

---

多个后台可以执行以下操作：

.box{
宽度：180px；
高度：180像素；
边界半径：9px；
背景：
线性梯度（#f8e34b，#f8e34b）顶部/100%50%，
线性梯度（178度，#c8c8c8 30%，透明70%）
0计算（50%+4px）/50%8px，
线性渐变（#0c0c，#0c0c）右下角/50%50%，
#eeedef；
背景重复：无重复；
}

---

你可以很容易地对pseudo元素做一点小动作，但我什么都不能用，只有tidy

CSS

pseudo元素是CSSI尝试使用的，但它不起作用…将内联块添加到pseudo元素中