Rectangle with two cut edges

Question

I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3. Any help? or tutorial?

Answer 1

You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.

The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to each other).

div {
  background: red;
  width: 200px;
  height: 100px;
  position: relative;
}
div:before {
  position: absolute;
  height: 0;
  width: 0;
  content: ' ';
  border: 20px solid white;
  border-color: transparent transparent white white;
  border-width: 20px 0px 0px 15px;
  left: 0;
  top: 80px;
}
div:after {
  position: absolute;
  height: 0;
  width: 0;
  content: ' ';
  border: 20px solid white;
  border-color: white white transparent transparent;
  left: 170px;
  top: 0px;
}
.with-img {
  background: url(http://lorempixel.com/100/100);
}

<div></div>
<br>
<div class="with-img"></div>

---

Sample 2: You can also achieve a similar effect using gradients. Just 1 gradient is enough to produce a cut of similar angle on both sides. If different angles are required then two gradients should be used. However the multiple gradient approach mentioned here will not work when the body background is a non-solid color.

div {
  width: 200px;
  height: 100px;
  position: relative;
}
.with-single-gradient {
  background: linear-gradient(45deg, transparent 5%, yellowgreen 5%, yellowgreen 90%, transparent 90.5%);
}
.with-single-gradient.image {
  background: linear-gradient(45deg, white 5%, transparent 5%, transparent 90%, white 90.5%), url(http://lorempixel.com/100/100);
}
.with-multiple-gradient.image {
  background: linear-gradient(45deg, transparent 0%, transparent 90%, white 90%), linear-gradient(60deg, white 10%, transparent 5%, transparent 100%), url(http://lorempixel.com/100/100);
}

<div class='with-single-gradient'></div>
<br>
<div class='with-single-gradient image'></div>
<br>
<div class='with-multiple-gradient image'></div>

---

Sample 3: This can also be created using SVG and is the best method yet. All that it requires is just a single path element which creates the required shape.

<svg viewBox='0 0 100 60' width='200px' height='120px'>
  <path d='M0,0 80,0 100,16 100,60 10,60 0,54z' fill='yellowgreen' />
</svg>

Tested on Chrome v24, Firefox v19, Safari v5.1.7 (on Windows) and IE v10. They are older versions but should work in the latest versions also.

Note: IE versions less than 10 do not support gradients as mentioned in this SO thread.

Answer 2

there's no thing as straight radius, but here you have some tutorials. For weird shapes, you need to use a combination of shape and negative space, basically using figures with the same color of the background . The good news is you could use "transparent" as color, so you can "fake" this figures in an easy way. See tutorials Shapes of CSS or yuo can use a generator like CSS Shape Generator or CSS Shape Generator 2 but they will highly depend on your needs. Personally, I'd use a BG image and be a happy camper

Answer 3

to make this shape you have to use pseudo class. and i hope it will help you

div { display: inline-block; margin: 20px; float: left; }

shape {

width: 208px;
height: 130px;
background: red;
position: relative; }  

shape:before {

content: "";
position: absolute;
top: 0;
left: 0;    
border-bottom: 29px solid red;
border-right: 29px solid #fff;
width: 179px;
height: 0; }  

shape:after {

content: "";
position: absolute;
bottom: 0;
left: 0;    
border-top: 29px solid red;
border-left: 29px solid #fff;
width: 42px;
height: 0; }

demo

Answer 4

2 gradients and background-size can be used too :

div {
  width: 1440px;
  height: 590px;
  background: 
    linear-gradient(45deg, transparent 80px, #FF0000 80px) left no-repeat, 
    linear-gradient(-135deg, transparent 160px, #FF0000 160px) top right no-repeat;
  background-size: 50% 100%;
}

<div>
</div>

---

1 gradients and calc() can be used too :

div {
  width: 1440px;
  height: 590px;
  background: 
    linear-gradient(45deg, transparent 80px, #FF0000 80px, #FF0000 calc( 100% - 160px), transparent calc( 100% - 160px) );
}

<div>
</div>

---

Related to duplicate question https://stackoverflow.com/questions/36932294/how-can-i-create-the-object-in-picture-below-using-css-border-radius :

div {
  width:980px;
  height:460px;
  background:linear-gradient(140deg,transparent 200px, #FFCB05 200px) left no-repeat,
    linear-gradient(-40deg,transparent 80px, #FFCB05 80px) top right no-repeat;
  background-size:50% 100% ;
}

<div>
  div shape
</div>
image
<img src="https://i.stack.imgur.com/M48zP.png" />

Answer 5

For the second shape use this:

border-bottom-left-radius:50px;
border-top-right-radius:50px;

Check JSFiddle Demo

Edit: Question is edited and second shape has been removed.

Answer 6

• You can add an element with overflow: hidden;

• skew transform the parent by desired angle. Unskew the pseudoelement by the negative of that angle.

Using this approach, you can also add images to background.

div {
    height: 100px;
    width: 220px;
    overflow: hidden;
    position: relative;
    -webkit-transform: skewX(45deg);
    -moz-transform: skewX(45deg);
    transform: skewX(45deg);
}
div:before {
    content: '';
    position: absolute;
    left: 10px;
    height: 100px;
    width: 200px;
    background: red;
    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    transform: skewX(-45deg);
}

<div></div>

FIDDLE

FIDDLE (with image)