Half hexagon shape with one element - css

Question

I'm trying to replicate the following shape with no success:
I'm guessing I'll need some :before and :after pseudo elements along with the following css:
#pentagon {
position: relative;
width: 78px;
height:50px;
background:#3a93d0;
}

Answer 1

Using Border Method:
You can do it using the below CSS. The shape is obtained by placing a triangle shape at the bottom of the rectangle using :after pseudo element. The triangular part is achieved using border method.
.pentagon {
height: 50px;
width: 78px;
background: #3a93d0;
position: relative;
}
.pentagon:after {
border: 39px solid #3a93d0;
border-top-width: 15px;
border-color: #3a93d0 transparent transparent transparent;
position: absolute;
top: 50px;
content: '';
}
<div class="pentagon"></div>
Using CSS Transforms:
This approach uses rotate, skewX and hence would need a fully CSS3 compliant browser to work properly. The advantage of this approach is that it allows borders to be added around the shape unlike when using border method. The drawback is that it needs additional calculations for the angles.
It is a modified version of the short triangle method mentioned in this CodePen demo by web-tiki.
.pentagon {
position: relative;
height: 50px;
width: 78px;
background: #3a93d0;
}
.pentagon:before {
position: absolute;
content: '';
top: 12px;
left: 0;
width: 46px;
height: 38px;
background: #3a93d0;
transform-origin: 0 100%;
transform: rotate(29deg) skewX(-30deg);
}
.pentagon.bordered {
background: white;
border: 1px solid #3a93d0;
}
.pentagon.bordered:before {
width: 44px;
height: 37px;
background: white;
border: 1px solid #3a93d0;
border-color: transparent #3a93d0 #3a93d0 transparent;
transform: rotate(29deg) skewX(-30deg);
}
/* Just for demo */
.pentagon {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="pentagon"></div>
<div class="pentagon bordered"></div>
Using CSS Skew Transforms:
This approach uses just skew() (along both X and Y axes) and does not need any complex angle calculations. It just needs the dimensions and position of the pseudo-element to be adjusted as the dimension of the parent changes.
.pentagon {
position: relative;
height: 50px;
width: 78px;
border: 1px solid #3a93d0;
border-bottom: none;
background: aliceblue;
}
.pentagon:before {
position: absolute;
content: '';
top: 10px; /* parent height - child height -1px */
left: -1px;
width: 39px;
height: 39px; /* width of parent/2 */
border-right: 1px solid #3a93d0;
border-bottom: 1px solid #3a93d0;
background: aliceblue;
transform-origin: 0 100%;
transform: matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0);
}
<div class="pentagon">
</div>
The above snippet uses matrix transform because as per MDN, the skew(x, y) is removed and should not be used anymore. The Matrix Resolutions site can be used to obtain the equivalent matrix function. The matrix function for rotate(45deg) skew(-22.5deg, -22.5deg) is
matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0).
Using Clip Path:
Here is another approach to creating the pentagon shape with clip-path. Either a pure CSS clip-path or one with inline SVG can be used depending on required browser support. CSS clip-path is supported only by Webkit browsers at present.
IE (all versions) do not support either the CSS or the SVG clip-path.
.pentagon {
position: relative;
width: 75px;
height: calc(75px / 1.414);
background: #3a93d0;
}
.pentagon.css {
-webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
.pentagon.bordered:after {
position: absolute;
content: '';
height: calc(100% - 2px);
width: calc(100% - 2px);
left: 1px;
top: 1px;
background: white;
}
.pentagon.css.bordered:after {
-webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg.bordered:after {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
/* Just for demo */
.pentagon {
margin: 10px;
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0,0 0,0.66 0.5,1 1,0.66 1,0z" />
</clipPath>
</defs>
</svg>
<h3>CSS Clip Path</h3>
<div class="pentagon css"></div>
<div class="pentagon bordered css"></div>
<h3>SVG Clip Path</h3>
<div class="pentagon svg"></div>
<div class="pentagon bordered svg"></div>

Answer 2

You can try an alternate approach using transform scaleX and rotate: 45deg;. This makes it very easy to create the bottom part of the shape.
transform: scaleX() rotate(45deg);
Working
*sorry for bad quality gif! :(
Sans border:
Fiddle
#pent{
height: 50px;
width: 100px;
position: relative;
background-color: deepskyblue;
}
#pent:before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width:45px;
height:45px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleX(1.57) rotate(45deg);
-moz-transform: scaleX(1.57) rotate(45deg);
-ms-transform: scaleX(1.57) rotate(45deg);
transform: scaleX(1.57) rotate(45deg);
background-color: deepskyblue;
}
<div id="pent"></div>
With border :
Fiddle
#pent{
height: 50px;
width: 100px;
position: relative;
border: 1px solid black;
border-bottom: 0;
}
#pent:before{
content: '';
position: absolute;
bottom: 0;
left: -1px;
width:45px;
height:45px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleX(1.57) rotate(45deg);
-moz-transform: scaleX(1.57) rotate(45deg);
-ms-transform: scaleX(1.57) rotate(45deg);
transform: scaleX(1.57) rotate(45deg);
border: 1px solid black;
border-top: 0;
border-left: 0;
}
<div id="pent"></div>

Answer 3

See a demo - basically it uses css triangles and a pseudo element to give a place for the triangle.
.shape {
position: relative;
width: 78px;
height:30px;
background:#3a93d0;
}
.shape:after {
content: '';
display: block;
position: absolute;
top: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 39px 0 39px;
border-color: #3a93d0 transparent transparent transparent;
}

Answer 4

<style>
#pentagon
{
position: relative;
width: 54px;
border-width: 40px 18px 0;
border-style: solid;
border-color: #3a93d0;
}
#pentagon:after {
border-color: #3a93d0 transparent transparent;
border-style: solid;
border-width: 21px 45px 0;
content: "";
height: 0;
left: -17px;
position: absolute;
top: 0;
width: 0;
}
</style>

Answer 5

if you dont want to use css3 you can do it with css
only problem is this implementation is not responsive. :(
<pre>
<div class="moregrey"></div>
<div class="arrowdown"></div>
.moregrey
{
width: 1000px;
height: 30px;
background: #3f3f40;
}
.arrowdown
{
border-top:50px solid #3f3f40;
border-left:500px solid transparent;
border-bottom:500px solid transparent;
border-right:500px solid transparent;
display:block;
width:0px;
height:10px;
}
</pre>
<pre>
http://jsfiddle.net/jmqoj5nh/1/
</pre>