1

How do I make half a hexagon shape with a border and over top a rectangle shape with a border and an image inside the half hexagon shape using CSS and HTML5

I have no code for this as I have tried but cannot figure out how to do it

I added an image of what I would like to be able to do.

enter image description here

Classics07
  • 127
  • 1
  • 1
  • 9
  • If you could post the relevant HTML and CSS - to show what you're working with - that would help us to provide more useful and specific answers. Without the code it's largely us guessing as to what might be possible. – David Thomas Mar 04 '16 at 22:57
  • Might find help here: [How to draw a trapezium/trapezoid with css3?](http://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3) – jbutler483 Mar 04 '16 at 23:02
  • May be you mean half an hexagon ? – vals Mar 05 '16 at 09:28
  • yes, I did. Thank you for pointing that out. I have edited my question – Classics07 Mar 06 '16 at 17:44
  • I have no code for this because I haven't been able to figure it out; i did try a couple things but I can't seem to get it – Classics07 Mar 06 '16 at 17:45

4 Answers4

5

You can create a trapezoid fairly easily with a rectangle and 2 CSS triangles made with some transparent borders using :before and :after.

Working Example:

body {
    background: black;
}

.rectangle {
    background: #ECECEC;
    height: 20px;
}

.trapezoid {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    background: #ECECEC;
}
.trapezoid:before,
.trapezoid:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    border: 25px solid transparent;
    border-top-color: #ECECEC;
}
.trapezoid:before {
    right: 100%;
    border-right-color: #ECECEC;
}
.trapezoid:after {
    left: 100%;
    border-left-color: #ECECEC;
}
<div class="rectangle">
    <div class="trapezoid"></div>
</div>
Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
2

updated with shape and border-colors

div {
  margin-top:1em;;
  text-align: center;
  padding: 0.5em;
  border-top:1px solid lightgray;
  background: linear-gradient(to bottom, #ECECEC 50%, lightgray 50%, lightgray 51%, transparent 52%);
}

img {
  position: relative;
  display: block;
  margin: 10px auto;
  z-index: 1;
}

span {
  text-align: center;
  display: inline-block;
  width:320px;
  position: relative;
  overflow: hidden;
  border-top:1px solid lightgray;
  background: linear-gradient(to left, lightgray, lightgray) bottom center, linear-gradient(40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom left, linear-gradient(-40deg,  transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom right;
  background-repeat: no-repeat;
  background-size: 50% 2px, 50% 100%, 50% 100%;
}
<div>
  <span>
    <img src="http://lorempixel.com/55/46/technics/1" alt="ico"/>
  </span>
</div>

older codes

a single pseudo and overflow:hidden, can do it too:

div {
  text-align: center;
  padding: 0.5em;
  background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
  position: relative;
  display: block;
  padding: 0.5em 0;
  z-index: 1;
}
span {
  text-align: center;
  display: inline-block;
  padding: 0 3em;
  position: relative;
  overflow: hidden;
}
span:before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 50%;
  margin-left: -75px;
  height: 150px;
  width: 150px;
  background: gray;
  transform: rotate(45deg);
}
<div>
  <span>
    <img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
  </span>
</div>

or a gradient (easier probably to draw borders or shadows if needed)

div {
  text-align: center;
  padding: 0.5em;
  background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
  position: relative;
  display: block;
  padding: 0.5em 0;
  z-index: 1;
}
span {
  text-align: center;
  display: inline-block;
  padding: 0 3em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(40deg, transparent 1.5em, gray 1.5em)bottom left, linear-gradient(-40deg, transparent 1.5em, gray 1.5em)bottom right;
  background-repeat: no-repeat;
  background-size: 50% 100%;
}
<div>
  <span>
    <img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
  </span>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Thanks for the help, I edited this question to better explain it with a better image of what I am looking to accomplish. I have tried a few things but haven't been able to get it yet. ~ all your help is appreciated. thank you – Classics07 Mar 06 '16 at 17:43
  • updated the answer with this http://codepen.io/gcyrillus/pen/pygvWw size and colors can be tuned to your needs, play with it to understand how it works – G-Cyrillus Mar 06 '16 at 18:09
2

Here is a solution using pseudo elements with skew. The image can be overlayed without problems

.rect {
  width: 100%;
  height: 20px;
  background-color: lightgrey;
  border-bottom: 1px solid grey;
  position: relative;
}

.hex {
  width: 200px;
  height:  40px;
  position: absolute;
   left: 50%;
  transform: translateX(-50%);
}

.hex:before, .hex:after {
   content: "";
  position: absolute;
  width: 200px;
  height: 40px;
  border-style: solid;
  border-color: grey;
  border-width: 0px 0px 1px 0px;
  transform-origin: bottom center;
  background-color: lightgrey;
}

.hex:before {
   transform: skew(10deg); 
  border-left-width: 1px;
}
.hex:after {
   transform: skew(-10deg);  
  border-right-width: 1px;
}
<div class="rect">
  <div class="hex"></div>
  </div>
vals
  • 61,425
  • 11
  • 89
  • 138
0

You can create half octagon using :after.

.halfOctagon {
    width: 100px;
    height: 50px;
    background: #f35916;
    position: relative;
    top:25px;
    left:50px;
}

.halfOctagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #f35916;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

you can try live example in https://jsfiddle.net/kb2tzxq4/

To move the half octagon adjust top and left in css for .halfOctagon

user1498198
  • 31
  • 3