There are two methods to achieve this using CSS3. One is using skewX on pseudo-elements while the other is using rotate on pseudo-elements. Both the methods are also responsive.
Using Skew:
This method is adapted from web-tiki’s answer in this thread. It basically uses two pseudo-elements (with roughly 50% width of the container) that are skewed in opposite directions and positioned appropriately to arrive at the arrow shape. The shapes have borders where as the background is set to transparent meaning the pseudo-elements would produce a bottom border + downward arrow effect. The arrow fill would always be transparent (or body color) in this sample.
body {
background: rgb(245, 242, 242);
}
.bordered {
position: relative;
height: 200px;
width: 200px;
margin: 10px;
line-height: 200px;
}
.bordered:after,
.bordered:before {
position: absolute;
content: ' ';
height: 8px;
width: 50%;
bottom: 0px;
}
.bordered:before {
left: 0px;
border-top: 1px solid gray;
border-right: 1px solid gray;
transform-origin: left bottom;
transform: skewX(45deg);
}
.bordered:after {
right: 0px;
border-top: 1px solid gray;
border-left: 1px solid gray;
transform-origin: right bottom;
transform: skewX(-45deg);
}
.bordered img {
width: 150px;
padding: 25px;
vertical-align: middle;
}
/* Just for demo */
.bordered {
transition: all 1s;
text-align: center;
}
.bordered:hover {
height: 250px;
width: 250px;
line-height: 250px;
}<!-- library included only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bordered">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
The below method would produce a transparent triangle such that the page’s background is seen through the triangular cut.
body {
background: rgb(245, 242, 242);
}
.bordered {
position: relative;
height: 200px;
width: 200px;
margin: 10px;
background: rgb(200, 200, 200);
background-clip: content-box;
line-height: 200px;
overflow: hidden;
}
.bordered.top {
padding-top: 8px;
}
.bordered.bottom {
padding-bottom: 8px;
}
.bordered:after,
.bordered:before {
position: absolute;
content: ' ';
height: 8px;
width: 50%;
background: inherit;
}
.bordered.top:after,
.bordered.top:before {
top: 0px;
}
.bordered.bottom:after,
.bordered.bottom:before {
bottom: 0px;
}
.bordered:before {
left: 0px;
border-right: 1px solid gray;
}
.bordered.top:before {
border-top: 1px solid gray;
transform-origin: left bottom;
transform: skewX(45deg);
}
.bordered.bottom:before {
border-bottom: 1px solid gray;
transform-origin: left top;
transform: skewX(-45deg);
}
.bordered:after {
right: 0px;
border-left: 1px solid gray;
}
.bordered.top:after {
border-top: 1px solid gray;
transform-origin: right bottom;
transform: skewX(-45deg);
}
.bordered.bottom:after {
border-bottom: 1px solid gray;
transform-origin: right top;
transform: skewX(45deg);
}
.bordered img {
width: 150px;
padding: 25px;
vertical-align: middle;
}
/* Just for demo */
div{
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bordered top">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
<div class="bordered bottom">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>Using Rotate:
This method uses a rotated pseudo-element (rotated by 45 degrees) to achieve the downward arrow effect and is then placed on top of the bottom border of the div. In this method, the background of the pseudo-element is set to the same color as the div containing it. (Note: In this sample the image and div have different fill colors.)
body {
background: lightgray;
}
.colored {
height: 200px;
width: 200px;
position: relative;
margin: 10px;
line-height: 200px;
}
.colored img {
vertical-align: middle;
width: 150px;
padding: 25px;
}
.colored {
background: yellow;
border-bottom: 1px solid gray;
}
.colored:after {
height: 10px;
width: 10px;
position: absolute;
content: '';
background: yellow;
border: 1px solid gray;
border-top-width: 0px;
border-left-width: 0px;
transform: rotate(45deg);
bottom: -6px;
left: calc(50% - 4px);
}
/* Just for demo */
.colored{
text-align: center;
transition: all 1s;
}
.colored:hover{
height: 250px;
width: 250px;
line-height: 250px;
}<!-- library included only to avoid prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="colored">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>