CODEWITHSUNDEEP
htmlcss
ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

Is it possible to create rectangle with its left and right sides are absolute circle by using CSS?

Here what I'm trying to create is shown in the image https://i.sstatic.net/qZIEJ.png

I have used border-radius but it didn't helped me. what I have done so far is given on the snippet below:

.button-holder{
    width:300px;
    height:100px;
}
.button{
    width:80%;
    height:65%;
    border-radius:50%;
    border:2px solid #000;
    background-color:#063755;
}
<div class="button-holder">
   <div class="button"></div>
</div>

Please Note:- I know that it's possible to obtain the shape by merging multiple <div> tags,but it will not help me. I looking for an answer with a single <div> tag.

Upvotes: 1

Views: 644

Answers (3)

Lakshya Srivastava
Lakshya Srivastava

Reputation: 709

Try this:

<html>

<head>
  <style>
    #corner {
      border-radius: 100px 100px 100px 100px;
      background: #73AD21;
      padding: 20px;
      width: 400px;
      height: 150px;
    }
  </style>
</head>

<body>
  <p id="corner"></p>
</body>

</html>

output

Upvotes: 0

cup_of
cup_of

Reputation: 6687

you can use psuedo elements like this:

.button-holder {
  width: 300px;
  height: 100px;
  background-color: #063755;
  position: relative;
  margin: 0 auto;
}

.button-holder:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 33.33%; /* height/width */
  top: 0;
  left: -16.665%; /* 1/2 of the width */
  border-radius: 100%;
  background-color: #063755;
}

.button-holder:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 33.33%;
  top: 0;
  right: -16.665%;
  border-radius: 100%;
  background-color: #063755;
}
<div class="button-holder">

</div>

Upvotes: 1

fubar
fubar

Reputation: 17388

You need to use half the height in px, not %.

.button-holder{
    width:300px;
    height:100px;
}
.button{
    width:80%;
    height:65%;
    border-radius:32.5px;  // 100px * 0.65 * 0.5 = 32.5px
    border:2px solid #000;
    background-color:#063755;
}
<div class="button-holder">
   <div class="button"></div>
</div>

Upvotes: 3

Related Questions