Question

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

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

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

总宽度：180像素
总高度：180像素
黄色部分的高度：90px
白色部分的宽度：90px
圆角半径：9px
颜色：
- 黑色：＃0c0c0c
- 黄色：＃f8e34b
- 白色：#eeedef
阴影：＃c8c8c8，178度

div {  
  width: 180px;  
  height: 180px;  
}

div:before{
	content:"";
	width: 180px;
	height: 90px;
	background: #f8e34b;
}

div:after {
	content: "";
	width: 90px;
	left: 0;
	height: 90px;
	background: #eeedef;
}

div:after{
	content: "";
	width: 90px;
	height: 90px;
	right: 0;
	background: #0c0c0c;
}

    
        <div></div>

https://developer.android.com/jetpack/androidx/migrate/artifact-mappings

Answer 1

多个背景可以做到这一点：

.box {
  width:180px;
  height:180px;
  border-radius:9px;
  background:
     linear-gradient(#f8e34b,#f8e34b)   top /100% 50%,
     
     linear-gradient(178deg,#c8c8c8 30%, transparent 70%) 
      0 calc(50% + 4px) /50% 8px,
      
     linear-gradient(#0c0c0c,#0c0c0c) bottom right/50% 50%,
     
     #eeedef;
  background-repeat:no-repeat;
    
}

<div class="box"></div>

有关了解不同的值：Using percentage values with background-position on a linear gradient

Answer 2

您可以使用CSS伪元素before和after实现此目的。您的代码为：

div { 
  width: 180px;
  height: 180px;
  background-color: #eeedef;
  position: relative;
  border-radius: 8px;
  overflow:hidden;
}
div::before {
  content: '';
  width: 180px;
  height: 90px;
  top: 0;
  left: 0;
  background-color: #f8e34b;
  position: absolute;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 3px 10px #c8c8c8;
}
div::after {
  content: '';
  width: 90px;
  height: 90px;
  bottom: 0;
  right: 0;
  background-color:  #0c0c0c;
  position: absolute;
  border-bottom-right-radius: 8px;
}

<div><div>

但是，我没有对角阴影的经验，因此该示例不包括这部分。

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

2 个答案: