Html Question posted in
Some basic documentation can be found here.

Html – How do I create a round-cornered rectangle with a quadrant removed?

The shape is a rectangle with rounded corners, except one of the rectangles quandrants has been removed, and all corners of that quadrant have been smoothed out.
example 1 example 2
I want to build this rounded shape in HTML. The box’s size may vary based on its contents.

I understand that we may achieve this by include this shape as a image, however I am expecting any CSS code for this.

Tags:

3

Answers


  1. 0

    It is very simple to create a round cornered rectangle with a quadrant.
    I am listing a short code which will fulfill your requirements but at the same time I would suggest you that this code might require little bit adjustments from your side based on your exact size and curvature requirement, div name in html etc.

    <div class="rounded-box">
    <div class="cutout"></div>
</div>

    .rounded-box {
    position: relative;
    width: 300px;
    height: 150px;
    background-color: green;
    border-radius: 20px;
}

.cutout {
    position: absolute;
    width: 200%;
    height: 200%;
    background-color: white;
    top: -75%;
    right: -75%;
    border-radius: 50%;
}

    I hope this will resolve your query.

    Login or Signup to reply.
  2. 0

    Css is not best way to do it, but something like this might work, just use elements with position absolute contained to model out what you want:

    CSS

    body {
  display: flex;
  background-color: white;
  flex-direction: column;
  height: 100vh;
}
.parent {
  height: 300px;
  background: red;
  position: relative;
}

.parent-corner {
  position: absolute;
  top: -30px;
  right: -30px;
  background-color: white;
  width: 200px;
  border-bottom-left-radius: 50px;
  height: 200px;
}

    HTML

      <body>
    <div class="parent">
      <div class="parent-corner"></div>
    </div>
  </body>
    Login or Signup to reply.
  3. 0

    reference image for code

    HTML Code

    <div class="case-item">
    <div class="case-img">
        <img class="img-fluid" src="https://ritps.com/garuda_overseas/assets/img/case/01.jpg" alt>
        <div class="case-btn">
             <a href=""><i class="far fa-arrow-right"></i></a>
        </div>
    </div>
    <div class="case-content">
         <h4><a href="">United States</a></h4>
    </div>
</div>

    CSS Code

    .case-item {
    position: relative;
}
.case-img {
    position: relative;
    overflow: hidden;
}
.case-img::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    left: 10px;
    opacity: 0;
    border-radius: 15px;
    background: rgba(51, 182, 255, .7);
    transform: scaleY(0);
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.case-img img {
    border-radius: 20px;
    height: 200px;
}
.case-btn {
    position: absolute;
    right: -3px;
    bottom: 0;
    width: 70px;
    height: 70px;
    background: var(--color-white);
    border-top-left-radius: 50%;
    padding: 10px;
}
.case-btn::before {
    content: "";
    position: absolute;
    left: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: 0 0;
    box-shadow: 5px 5px 0 5px var(--color-white);
    border-bottom-right-radius: 20px;
}
.case-btn a {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #020626;
    color: var(--color-white);
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
}
.case-btn::after {
    content: "";
    position: absolute;
    top: -20px;
    right: 3px;
    width: 20px;
    height: 20px;
    background: 0 0;
    box-shadow: 5px 5px 0 5px var(--color-white);
    border-bottom-right-radius: 20px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search