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

Question

#hex li {
    list-style-type: none;
    position: relative;
    float: left;
    width: 25%;
    padding: 0 0 30% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
     background-color: #4c4177;
    background-image: linear-gradient(315deg, #4c4177 0%, #2a5470 74%);
    box-shadow: 5px 5px 5px 5px yellow
}


.clear:after {
    content: "";
    display: block;
    clear: both;
}

  <ul id="hex" class="clear">
        <li></li>
    </ul>

Your code was using sass not css . Adapted from

https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids

@Mina The code is using SCSS instead of CSS, so it won't actually run correctly. — Lee Taylor, Jul 12 '22 at 11:38
use the duplicate to build the hexagon then simply add a drop-shadow filter — Temani Afif, Jul 12 '22 at 11:42
Another approach could be to use `clip-path` -> [DEMO](https://codepen.io/thebabydino/pen/XbxKbL) — Reyno, Jul 12 '22 at 11:56

RNK · Answer 1 · 2022-07-12T13:24:27.140

.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...!!

Find this Ref link : https://stackoverflow.com/questions/24819717/how-to-make-a-curved-edge-hexagon-by-using-css — RNK, Jul 15 '22 at 06:23

Simp4Code · Answer 2 · 2022-07-12T11:55:22.170

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>

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

2 Answers2