<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="button">Click me</div>
<div class="row">
<div class="picture">
<img src="http://placehold.it/350x350" alt="…" />
</div>
</div>
<div class="tab">Trapezoid</div>
</div>
.container {
margin-top: 30px;
}
.row {
margin-top: 30px;
}
.button {
position: relative;
width: 100px;
height: 30px;
text-align: center;
color: white;
cursor: pointer;
/* text color, paddings, etc. */
}
.button::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
.picture {
margin-top: 40px;
width: 200px;
transform: rotate(45deg);
overflow: hidden;
//clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
.diamond img {
clip-path: polygon(50% 0, 100% 50%,
50% 100%, 0 50%);
transition: 1s clip-path;
}
.diamond img:hover {
clip-path: polygon(0 0, 100% 0,
100% 100%, 0 100%);
}
.cutout-corners {
background: #58a;
background:
linear-gradient(135deg, transparent 15px, #58a 0)
top left,
linear-gradient(-135deg, transparent 15px, #655 0)
top right,
linear-gradient(-45deg, transparent 15px, #58a 0)
bottom right,
linear-gradient(45deg, transparent 15px, #655 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.curved-cutout-corners {
background: #58a;
background:
radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.curved-cutout-corners-svg {
border: 20px solid #58a;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background: #58a;
background-clip: padding-box;
}
.tab {
margin-top: 70px;
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.tab::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;
