html+圆角六边形,CSS3 圆角六边形

CSS

语言：

CSSSCSS

确定

*,

*::before,

*::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

color: white;

background-color: #fff;

padding: 20px;

}

header {

font-size: 16px;

padding: 5px;

}

.hexagon {

position: relative;

display: inline-block;

margin: 0 0.5rem;

width: 4rem;

height: calc(4rem * 1.732);

background-color: #df2020;

}

.hexagon::before {

width: inherit;

height: inherit;

background-color: inherit;

content: "";

position: absolute;

left: 0;

transform: rotate(-60deg);

}

.hexagon::after {

width: inherit;

height: inherit;

background-color: inherit;

content: "";

position: absolute;

left: 0;

transform: rotate(60deg);

}

.one {

background-color: #1491d1;

width: 4rem;

height: calc(4rem * 1.732);

margin: 3rem;

}

.two {

background-color: #fff;

width: 3.1rem;

height: calc(3.1rem * 1.732);

margin: 5rem 0 1rem 4.7rem;

position: absolute;

top: 0;

left: 0;

}

.three {

background-color: #1491d1;

width: 2.2rem;

height: calc(2.2rem * 1.732);

margin: 5.8rem 0 1rem 5.1rem;

position: absolute;

top: 0;

left: 0;

}

.rounded,

.rounded::before,

.rounded::after {

border-radius: 0.75rem/0.25rem;

}

.rot30 {

transform: rotate(30deg);

}