Rectangle with two cutting edges
You can do this using pseudo-elements as shown below. The approach is to cut a triangular shape from the bottom left and top right margins. This method can be used with a solid color of the image inside the shape if the background of the body is a solid color. When the background of the body is not a 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 on each side (for example, in a question where the hypotenuse of a triangular cut on both sides is 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>
Example 2: You can also achieve a similar effect with gradients. Just one gradient is enough to cut the same corner on both sides. If different angles are required, two gradients must be used. However, the multiple gradient approach mentioned here will not work if the background of the body is not a 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>
Example 3 . This can also be done with SVG and is the best method. All it takes is just one element path
that 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 as well.
Note. IE versions less than 10 do not support gradients as pointed out in this SO thread .
source to share
there is nothing but a straight radius, but you have some lessons here. For weird shapes, you need to use a combination of shape and negative space, mostly using shapes with the same background color. The good news is that you can use "transparent" as the color so you can "fake" these numbers in a simple way. See Tutorials CSS Shapes or yuo can use a generator like CSS Shape Generator or CSS Shape Generator 2 , but these will depend a lot on your needs. Personally, I would use the BG image and be a happy camper
source to share
to make this shape you must use the pseudo class. and i hope this helps you
div {display: inline-block; margin: 20px; swim to the left; }
shape {
width: 208px; height: 130px; background: red; position: relative; }
shape: before {
The formcontent: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-right: 29px solid #fff; width: 179px; height: 0; }
: after {
content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #fff; width: 42px; height: 0; }
source to share
2 gradients and background sizes can also be used:
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 also be used:
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 fooobar.com/questions/2157554 / ... :
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="http://i.stack.imgur.com/M48zP.png" />
source to share
-
You can add an item with
overflow: hidden;
-
skew
transforms the parent to the desired angle. Highlight bypseudoelement
negating this angle.
Using this approach, you can also add images to the 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>
source to share