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

I have just finished learning HTML and CSS and was doing some practice. Please tell me how i create the center shape in the attached picture?

that’s the image and i’ve marked which shape i’m facing problem in to create it

I tried a lot of different videos on youtube and read and studied the code on different websites, but so far didn’t succeed in creating that shape.

Tags:

2

Answers


  1. 0

    That is basically triangle image attached below the div box.
    which is simplest and easy way of doing it.

    Solution:
    cut the image of triangle part that is below the Book Now button and add the image in below the box div.

    body{
background:black;
}
.box{
background:#FFF;
width:300px;
border-radius:20px;
overflow:hidden;
text-align:center;
}
.bottom-image{
width:300px;
position: relative;
top: -11px;
}
.text{
padding:20px;
}
.image img, .bottom-image img{
width:100%;
}
      <div class="box">
  <div class="image">
  <img src="https://loremflickr.com/cache/resized/65535_52690403064_1961271c4f_n_320_240_nofilter.jpg">
  </div>
  <div class="text">
  <p>data</p>
  <p>data</p>
  <p>data</p>
  <p>data</p>
  <button>Book Now</button>
  </div>
  </div>
  <div class="bottom-image">
  <img src="https://i.stack.imgur.com/e74iH.jpg">
  </div>
    Login or Signup to reply.
  2. 0

    You can do that with SVG Shapes. I recommend doing it that way, because if you want to have a border around it, it would be necessary (or the easiest way) to have a single shape.

    3 ways of creating a shape:

    1. create shape in Illustrator and export as svg, the use the code
    2. find a suitable online SVG Shape creator, then use the code
    3. directly create the code yourself.

    Having a triangle placed below a square will cause some issues when designing borders, shadows, etc. Loading an image for creating the triangle will be an additional source to load (performance) and will get you into trouble if the image somehow can’t be loaded, the design will be broken then. Apart from that, an image will limit your design opportunities (e.g. :hover) and/or create additional unnecessary effort. And since it’s 2023, you don’t have to use oldschool 2000’s techniques anymore 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search