How can you create such a shape using css?-CodePudding

How to create a circle background and crop it in div?

CodePudding user response：

a simple clip-path can do it:

.box {
  width:300px;
  height:150px;
  background:lightblue;
  clip-path:circle(farthest-side);
}

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

Or a radial-gradient

.box {
  width:300px;
  height:150px;
  background:radial-gradient(circle farthest-side,lightblue 98%,#0000);
}

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

CodePudding user response：

.container {
    width: 320px;
    height: 160px;
    overflow:hidden;
}
.circle {
    background-color: #aad2dd;
    border-radius: 50%; 
    width: 320px;
    height: 320px;
    margin-top: -80px;
}

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

CodePudding user response：

You can do like this:

div {
  height: 160px;
  width: 320px;
  position: relative;
  overflow: hidden;
}

div:after {
  content: "";
  position: absolute;
  border-radius: 17% / 50%;
  background-color: lightblue;
  height: 130%;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<div></div>

CodePudding user response：

This should be fine:

#tv {
    position: relative;
    width: 200px;
    height: 150px;
    margin: 20px 0;
    background: red;
    border-radius: 47% / 30%;
    color: white;
    text-align: center;
    text-indent: .1em;
}

#tv:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -5%;
    left: -5%;
    background: inherit;
    border-radius: 20% / 50%;
}

<div id="tv"></div>