CODEWITHSUNDEEP
csscss-shapes
michbeck
michbeck

Reputation: 745

Hexagon CSS (Rectangle with "Arrow-effect")

Please see the following CSS rules I'm using right now to create a rectangle with "arrow-effect" 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 out what to do when I need a rectangle with width:60px and height:22px and triangles left/right which fits?

Upvotes: 4

Views: 6411

Answers (1)

Anonymous
Anonymous

Reputation: 10216

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>

Upvotes: 6

Related Questions