I want to get this CSS shape and have a background puicture inside it

by

You can achieve similar shapes to this using the border-radius property. You can play around with the values until you get the perfect shape you want.

HTML:

<div class="shape">
  <img src="https://cdn.stocksnap.io/img-thumbs/960w/2RTQTEA00I.jpg">
</div>

CSS:

.shape{
  width:500px;
  height:400px;
  margin:50px auto;
  overflow:hidden;
  border-radius:0 0 10% 50%;
}
.shape img{
  max-height:100%;
}

Here’s a fiddle: https://jsfiddle.net/p80b7fp6/

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. Cut Corners using CSS
  3. Transparent half circle cut out of a div
  4. Curve bottom side of the div to the inside with CSS
  5. Can I create a div with a Curved bottom?
  6. How to create a circle with links on border side
  7. How to make this arrow in CSS only?
  8. CSS Progress Circle
  9. Shape with a slanted side (responsive)
  10. CSS3 Transform Skew One Side
  11. Elongated hexagon shaped button using only one element
  12. How to make a curved edge hexagon by using CSS
  13. Circular percent progress bar
  14. Generate repeating hexagonal pattern with CSS3
  15. How to create a curve between two gradient using CSS?
  16. How does this CSS produce a circle?
  17. Hexagon shape with a border/outline
  18. How to draw a trapezium/trapezoid with css3?
  19. How to create a transparent triangle with border using CSS?
  20. CSS Speech Bubble with Box Shadow
  21. Center Triangle at Bottom of Div
  22. CSS box shadow around a custom shape?
  23. How can I create a wavy shape CSS?
  24. How to Make A Chevron Arrow Using CSS?
  25. Title with bottom border smaller than width
  26. CSS Zigzag Border with a Textured Background
  27. Square DIV where height is equal to viewport
  28. How to create a heart shape using CSS?
  29. Make plus symbol in CSS
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment