CODEWITHSUNDEEP
htmlcss
user8847118
user8847118

Reputation:

Can I make different shape from css?

enter image description here

Can I make this shape from css?

.shape {
  margin: 40px;
  height: 40px;
  width: 100px;
  border-radius: 50px;
  background: #333;
  position: relative;
}


.shape:before {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}
<div class="shape"></div>

Upvotes: 3

Views: 90

Answers (3)

Niranjan2054
Niranjan2054

Reputation: 28

This code might help you.

This is CSS.

*
{
    margin: 0px;
    padding: 0px;
}
 .circle
{
    position: relative;
    height: 300px;
    background: #000;
    border-radius: 50%;
    border-color: #000;
    position: absolute;
    top: 50px;
    left:100px;
}
.top
{
    width: 358px;
    height: 115px;
    background: #000;
    border-radius: 54px;
    position: absolute;
    top:86px;
    left: -28px;
}
.hor
{
    width: 400px;
    height: 50px;
    background: #000;
    border-radius: 50px;
    position: absolute;
    top:117px;
    left:-50px;
}

This is its corresponding HTML.

<div class="page">
<div class="circle">
    <div class="top"></div>
    <div class="hor"></div>
</div></div>

Upvotes: 0

Miraj50
Miraj50

Reputation: 4407

So,you have three components, you have already made one using the normal CSS and other (the circle) using before selector. Now, use the after selector to make the third component.

.shape {
  margin: 40px;
  height: 40px;
  width: 155px;
  border-radius: 50px;
  background: #333;
  position: relative;
}
.shape:after {
  height: 55px;
  width: 135px;
  border-radius: 20px;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

.shape:before {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}
<div class="shape"></div>

Upvotes: 1

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

This is what you are looking for

.shape {
  margin: 40px;
  height: 40px;
  width: 110px;
  border-radius: 50px;
  background: #333;
  position: relative;
}

.shape:before {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

.shape:after {
  height: 40px;
  width: 121px;
  border-radius: 90%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}
<div class="shape"></div>

Upvotes: 3

Related Questions