You could directly use svg
.
<svg width="150" height="150">
<path d="M0,0 h125 l25,75 l-25,75 h-125z" fill="#4275FF" />
</svg>
You could make use of svg
's clipPath
and foreignObject
to import the div
into svg
element and apply inline clipPath
for cross-browser support.
Browser Support for this approach
div {
width: 150px;
height: 150px;
background: #4275FF;
}
<svg width="150" height="150">
<defs>
<clipPath id="shape">
<path d="M0,0 h125 l25,75 l-25,75 h-125z" />
</clipPath>
</defs>
<foreignObject clip-path="url(#shape)" width="100%" height="100%">
<div></div>
</foreignObject>
</svg>
Using an image instead of a solid color.
<svg width="150" height="150">
<defs>
<clipPath id="shape">
<path d="M0,0 h125 l25,75 l-25,75 h-125z" />
</clipPath>
</defs>
<image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/150/150/" width="100%" height="100%" />
</svg>
Alternatively, you could use a triangle on :after
:pseudo-element.
div {
position: relative;
width: 125px;
height: 150px;
background: #4275FF;
}
div:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 75px solid transparent;
border-bottom: 75px solid transparent;
border-left: 25px solid #4275FF;
right: -25px;
}
<div></div>
Adding an image instead of a solid color using CSS.
#main-container {
width: 150px;
height: 150px;
overflow: hidden;
}
#container,
#shape {
position: relative;
width: 200px;
height: 195px;
transform: rotate(-20deg) translate(-46px, -40px);
overflow: hidden;
-webkit-backface-visibility: hidden;
}
#shape {
position: relative;
height: 500px;
transform: rotate(40deg) translateY(-50%);
left: -219px;
top: 112px;
}
#shape:after {
position: absolute;
content: '';
width: 150px;
height: 150px;
background: url(http://lorempixel.com/150/150);
transform: rotate(-20deg);
margin: 70px 0 0 52px;
}
<div id="main-container">
<div id="container">
<div id="shape">
</div>
</div>
</div>