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

Html – Css- create a rectangle with one side uneven line

I’m trying to create this design. A rectangle with one side is uneven.
It will be a parent div and will contain other children in it.

#myelement {
  display: flex;
  justify-content: center; 
  align-items: center;    
  background-color: #FFD580;
  height: 200px;

}

Codepen link – https://codepen.io/My-pics-Nissan/pen/RwzxyrX

enter image description here

Tags:

3

Answers


  1. 0

    Use clip-path: Polygon();

    Experiment with each side values, and set whatever one you like.

    Login or Signup to reply.
  2. 0

    As tacoshy mentioned in his comment this could be achieved using clip path.

    Using the clip-path: polygon option will enable you to play with your wanted shape, for example for this clip polygon :

    0 0, 100% 0, 100% 85%, 90% 90%, 80% 85%, 70% 90%, 60% 85%, 50% 90%, 40% 85%, 30% 90%, 20% 85%, 10% 90%, 0 85%

    You can create this shape :

    #myelement {
  display: flex;
  justify-content: center; 
  align-items: center;    
  background-color: #FFD580;
  height: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 90%, 80% 85%, 70% 90%, 60% 85%, 50% 90%, 40% 85%, 30% 90%, 20% 85%, 10% 90%, 0 85%);
}
      <div id="myelement">
    Hello world
  </div>

    From this point you can play with your polygon points and create you wanted shape.

    Login or Signup to reply.
  3. 0

    You can use clip-path for the irregular shapes, this will help to create all most kind or regular shapes,

    But the design you mentioned you need to use background image with svg icons, then you will be able achive the exact design whatever you required, please follow the below code

    .svg-irregular-rectangle {
  width: 300px;
  height: 200px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><path d="M0,0 L300,0 L300,180 Q280,185 260,182 T200,180 Q150,185 100,182 T40,185 Q20,180 0,180 Z" fill="%23f5f0eb"/></svg>');
  padding: 20px;
  box-sizing: border-box;
}

    SVG Path ():

    The top, left, and right sides are straight lines, as indicated by L300,0 L300,180.

    The bottom edge is created using quadratic Bézier curves (Q), which produce the smooth, wavy effect you see in the image.

    The final Z command closes the path by connecting the last point back to the start.

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

Back To Top
Search