这篇博客介绍了如何使用CSS来设置通用的元素边距、内边距和盒模型，并展示了如何创建六边形和带有圆角的图形。通过`.hexagon`选择器，利用伪元素`::before`和`::after`实现六边形的形状，而`.rounded`类则应用了圆角效果。此外，还展示了不同颜色和尺寸的六边形实例，如`.one`, `.two`和`.three`。
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);
}
扫一扫
1441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
