How to make a picture using only one element - div?

Question

The designer designed the logo. It will need to be used in a variety of conditions. To make it as convenient as possible, layout it with a single HTML element in pure CSS.

You cannot use pictures (even through data:uri).

I tried to use pseudo elements, but it doesn't work. Notes

Overall width: 180px
Overall height: 180px
Yellow section height: 90px
White section width: 90px
Rounding radius: 9px
Colors:
- black: #0c0c0c
- yellow: #f8e34b
- white: #eeedef
shadow: #c8c8c8, 178 degrees

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>

you can easily do a small *effort* with pseudo element to start — Temani Afif, Dec 06 '19 at 13:22

Temani Afif · Accepted Answer · 2019-12-06T13:42:27.003

Multiple background can do this:

.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>

Related to understand the different values: Using percentage values with background-position on a linear gradient

score 1 · Answer 2 · answered Dec 06 '19 at 13:36

You could achieve this with a css pseudo before and after element. Your code would be:

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>

However, I have no experience in diagonal shadows, so the example does not include this part.

How to make a picture using only one element - div?

2 Answers2