Question

0

92

Views

I want to create hexagon with css. created it but its doesn't match my required design

I never know how to make it plain in top and bottom. I tried but cant able to solve it. It should be in css only. and also want in responsive design

Here is my code.

<span class="hex1"></span>

.hex1 {
                    margin-top: 30px;
                    width: 104px;
                    height: 60px;
                    background-color: blue;
                    border-color: #fff;
                    position: relative;
                    display: inline-block;
                    &::before {
                        content: " ";
                        width: 0;
                        height: 0;
                        border-bottom: 30px solid;
                        border-color: inherit;
                        border-left: 52px solid transparent;
                        border-right: 52px solid transparent;
                        position: absolute;
                        top: -30px;
                    }
                    &::after {
                        content: "";
                        width: 0;
                        position: absolute;
                        bottom: -30px;
                        border-top: 30px solid;
                        border-color: inherit;
                        border-left: 52px solid transparent;
                        border-right: 52px solid transparent;
                    }
                }

Required design image

enter image description here

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-13T02:25:50.625Z

This is probably a bit of a cheat answer but you can use an HTML entity for this

body { font: 16px sans-serif; margin: 0; text-align: center }
* { line-height: 1.25 }

.entity {
  display: inline-flex;
  font-size: 1.25em; /* Match line height */
  text-shadow: 0 0.1em 0.1em rgba(0, 0, 255, 0.75);
  
  transition: text-shadow .25s ease-in-out;
}
.entity:hover { text-shadow: 0 0.2em 0.2em rgba(0, 0, 255, 0.75) }

<h1>This is a hexagon <div class="entity">⬣</div></h1>
<h2>This is an upside-down ohm <div class="entity">℧</div></h2>
<h3>This is a check mark <div class="entity">✓</div></h3>

Answer 2 · 2022-07-13T02:25:50.634Z

.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
  border-radius:2px;
}

.hexagon, 
.hexagon:before, 
.hexagon:after {
  background: blue;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);   
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  left: 22px;
  width: 57px;
  height: 57px;
  transform: rotate(145deg) skew(22.5deg);
}

.hexagon:before {
  top: -29px;
}

.hexagon:after {
  top: 27px;
}

.hexagon span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 55px;
  background: blue;
  z-index: 1;
}

<div style="margin:40px;"><div class="hexagon"><span></span></div></div>

Find Out these Example,You can change the Color and Box-shadow Css Property as you want...!!

0

92

I want to create hexagon with css. created it but its doesn't match my required design

2 answers

0

0

Find remote jobs

Andres GPT