0
93
ViewsQuiero crear un hexágono con css. lo creé pero no coincide con mi diseño requerido
Nunca sé cómo hacerlo claro en la parte superior e inferior. Lo intenté pero no puedo resolverlo. Debe estar solo en css. y también quiero en diseño responsivo
Aquí está mi código.
<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; } }Imagen de diseño requerida
·
Juan Pablo Isaza
2 answers
Answer question0
Esta es probablemente una respuesta un poco trampa, pero puede usar una entidad HTML para esto
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>
·
Juan Pablo Isaza
Report
0
.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>¡Descubra estos ejemplos, puede cambiar la propiedad Css Color y Box-shadow como desee ...!
·
Juan Pablo Isaza
Report
Answer question