Border With A Transparent Centred Arrow
Solution 1:
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);
}
.borderedimg {
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 --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><divclass="bordered"><imgsrc="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);
}
.borderedimg {
width: 150px;
padding: 25px;
vertical-align: middle;
}
/* Just for demo */div{
display: inline-block;
}<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><divclass="bordered top"><imgsrc="http://i.imgur.com/0Xqum3A.png" /></div><divclass="bordered bottom"><imgsrc="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;
}
.coloredimg {
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 --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><divclass="colored"><imgsrc="http://i.imgur.com/0Xqum3A.png" /></div>
Solution 2:
A simple solution where the background of the arrow will be transparent, allowing you to use it on changing backgrounds:
HTML:
<divclass="line-separator"><divclass="side-line"></div><divclass="triangle"></div><divclass="side-line"></div></div>CSS:
.side-line {
display: inline-block;
border-top: 1px solid black;
width: 20%;
}
.triangle {
display: inline-block;
height: 7px;
width: 7px;
transform: rotate(45deg);
transform-origin: center center;
border-top: 1px solid black;
border-left: 1px solid black;
margin: 0 -3px -3px;
}
Live demo:http://jsfiddle.net/85saaphw/
Solution 3:
I'm not sure if this is the best solution, but one option could be to use a :before to render the orange triangle and a :after to render a slightly smaller triangle with the color of your background. The :after triangle mostly covers the :before triangle leaving only a small orange triangle border. Unfortunately it can't be transparent if you solve it in this way.
.hero {
position: relative;
background-color: yellow;
height: 320px!important;
width: 100%!important;
border-bottom: 1px solid red;
}
.hero:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px#e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -48px;
width: 0;
height: 0;
border-top: solid 48px yellow;
border-left: solid 48px transparent;
border-right: solid 48px transparent;
}<divclass="hero"></div>
Post a Comment for "Border With A Transparent Centred Arrow"