CSS Hexagon (Arrow Effect Rectangle)
Please see the following CSS rules that I'm using right now to create an arrow-effect rectangle on the left and right:
CSS
.hexagon {
position: relative;
width: 60px;
height: 34.64px;
background-color: #64C7CC;
margin: 17.32px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 17.32px solid #64C7CC;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 17.32px solid #64C7CC;
}
HTML:
<div class="hexagon"></div>
Can anyone help me on what to do when I need a rectangle with width:60px
and height:22px
and left / right triangles that fits?
+3
source to share
1 answer
JSFiddle - DEMO
.hexagon {
position: relative;
width: 60px;
height: 22px;
background-color: #64C7CC;
margin: 50px;
}
.hexagon:before,
.hexagon:after {
content: " ";
position: absolute;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.hexagon:before {
left: 100%;
border-left: 11px solid #64C7CC;
}
.hexagon:after {
right: 100%;
border-right: 11px solid #64C7CC;
}
<div class="hexagon"></div>
+4
source to share