Как сделать такую штуку в css?

Question

Как сделать такую фигуру в css?

Answer 1

например так

.obj {
  position:     relative;
  
  width:        200px;
  height:       200px;
  
  background:   red;
  
  border:       15px solid white;
  outline:      3px solid black;
}

.obj:before {
  content:      '+';
  
  display:              flex;
  justify-content:  center;
  align-items:        center;  
  
  position:     absolute;
  left:         25%;
  top:          25%;
  
  width:        50%;
  height:       50%;
  
  border-radius:  50%;
  
  font:         bold 60px Verdana;
  
  color:        white;
  background:   orange;
}

<div class = 'obj'></div>

правда с outline надо аккуратнее, да и IE, Edge с ним не очень корректно работают, поэтому можно сделать так:

    .obj {
      position:     relative;
      
      width:        200px;
      height:       200px;
      
      background:   red;
      
      border:       15px solid white;
    }

    .obj:before {
      content:      '+';
      
      display:              flex;
      justify-content:  center;
      align-items:        center;  
      
      position:     absolute;
      left:         25%;
      top:          25%;
      
      width:        50%;
      height:       50%;
      
      border-radius:  50%;
      
      font:         bold 60px Verdana;
      
      color:        white;
      background:   orange;
    }
    
    .obj:after {
      content:      '';
      
      position:     absolute;
      left:         -18px;
      top:          -18px;
      
      width:        calc(100% + 36px);
      height:       calc(100% + 36px);
      
      border:       3px solid black;
      
    }

<div class = 'obj'></div>

БЛОГ НА HUSL

Как сделать такую штуку в css?

Ответы (1 шт):