create figures with css

Question

I'm looking to do it only with CSS. But when the background color changes, do not affect.

Please add your attempt to solve the problem. It's also difficult to understand what you're trying to do - do you want to recreate the image? What do you mean by "when the background color changes"? See [How to Ask](https://stackoverflow.com/help/how-to-ask). — Brad Koch, Mar 29 '18 at 02:57

Alfrex92 · Answer 1 · 2018-03-29T08:36:29.233

0

I think that this what you want

.container {
      position:relative;
      width: 500px;
      height: 200px;
      background-color: red;
    }
    
    .circle {
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: white;
      left: 50%;
       transform: translate(-50%, -50%);
    }

<div class="page">
  <div class="container">
    <div class="circle"></div>
  </div>
</div>

edited Mar 29 '18 at 08:36

answered Mar 29 '18 at 03:30

Alfrex92

6,278
9
31
51

This answer is incomplete. It should stand on it's own without the need to go to a third party site like codepen. Use the `<>` button in the question editor to create a SO Snippet, which is similar to codepen but embeded in your answer – Jon P Mar 29 '18 at 03:38

create figures with css

1 Answers1