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

Html – How to remove the both top angle from the rectangle in div?

I want to cut out the both top angle from my rectangle to make it look like a house in div tags.

a rectangle that i want

I tried to use the clip-path but it didn’t work. . .

the thing that i made

<div style="max-width: 620px; height: 200px; background-color: #FFFFFF; ;"></div>
<div style="max-width: 600px; height: 700px; background-color: #ffdbbb; padding: 10px; border-bottom-right-radius: 50px;"></div>
Tags:

2

Answers


  1. 0

    Your example does not have a clip path attribute. Just adding it can create a house shape:

    clip-path: polygon(0 50%, 50% 0, 100% 50%, 100% 100%, 0% 100%);

    You can change the values to tweak the shape and size of the house.

    Demonstration:

    <div style="max-width: 600px; height: 700px; background-color: #ffdbbb; padding: 10px; clip-path: polygon(0 50%, 50% 0, 100% 50%, 100% 100%, 0% 100%);"></div>

    enter image description here

    Login or Signup to reply.
  2. 0

    Solution using css border:

    .house {
position: relative;
width: 300px; /*assuming the desired width is 300px */
height: 150px;
background-color: #3498db;
}

.roof {
width: 0;
height: 0;
border-left: 150px solid transparent; /* half of the desired width */
border-right: 150px solid transparent; /* half of the desired width */
border-bottom: 100px solid #3498db; /* desired height and color */
}
    <div class="roof"></div>
<div class="house"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search