CODEWITHSUNDEEP
htmlcsscss-shapes
Sharifur Robin
Sharifur Robin

Reputation: 325

how can I make Css Shape like the first image

enter image description here

enter image description here

I did the Second One using The CSS border-left and border-right and border-top property the code is below.

Now I want to make only bordered shape just like the first image.

.team-social-icons a {
    background: #3C4E62;
    display: inline-block;
    width: 30px;
    height: 20px;
    color: #fff;
    position: relative;
}

.team-social-icons a:before {
    position: absolute;
    left: 0;
    top: -8px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 8px solid #3C4E62;
    content: "";
}
.team-social-icons a:after {
    position: absolute;
    left: 0;
    bottom: -8px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 8px solid #3C4E62;
    content: "";
}

Upvotes: 0

Views: 63

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

A hexagon can be constructed with three rectangles, each with left- and right-border (but no top- and bottom-border), and each rotated at 60 degrees from the next. This can conveniently be done with one :before and :after.

To centre the contents, you can use flex with align-items/justify-content.

.hexagon {
  display: inline-block;
  width: 120px;
  height: 69px;
  border-left: 1px solid black;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 42px;
}
.hexagon:before, .hexagon:after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border-left: 1px dashed black;
  border-right: 1px dashed black;
}
.hexagon:before {transform:rotate(60deg);}
.hexagon:after {transform:rotate(-60deg);}
<div class="hexagon"><b>1234</b>happy people</div>

Upvotes: 6

slikk
slikk

Reputation: 125

First, so you're able to differentiate between border and background, make everything have the same background color, like in the first example. Then just do border: 12px dotted white

Of course, if you don't want the right side to be include in the border, just do border-top then border-right and so on

Upvotes: 0

Related Questions