CSS实战笔记(二) 几何图形

1、星形

（1）效果演示

（2）样式代码

.star {
    width: 0px;
    height: 0px;
    border-bottom: 9.51px solid yellow;
    border-left: 3.09px solid transparent;
    border-right: 3.09px solid transparent;
    position: relative;
}
.star::before, .star::after {
    content: "";
    width: 0px;
    height: 0px;
    border-bottom: 9.51px solid yellow;
    border-left: 13.09px solid transparent;
    border-right: 13.09px solid transparent;
}
.star::before {
    transform: rotate(-36deg);
    position: absolute;
    top: 8.6px;
    left: -13.3852px;
}
.star::after {
    transform: rotate(36deg);
    position: absolute;
    top: 8.6px;
    left: -12.7948px;
}

/* 泛化：假设星型边长为 a，那么可以计算得到样式数据如下：
.star {
    width: 0px;
    height: 0px;
    border-bottom: 【0.951a】px solid yellow;
    border-left: 【0.309a】px solid transparent;
    border-right: 【0.309a】px solid transparent;
    position: relative;
}
.star::before, .star::after {
    content: "";
    width: 0px;
    height: 0px;
    border-bottom: 【0.951a】px solid yellow;
    border-left: 【1.309a】px solid transparent;
    border-right: 【1.309a】px solid transparent;
}
.star::before {
    transform: rotate(-36deg);
    position: absolute;
    top: 【0.86a】px;
    left: 【-1.33852a】px;
}
.star::after {
    transform: rotate(36deg);
    position: absolute;
    top: 【0.86a】px;
    left: 【-1.27948a】px;
}
说明：由于在计算过程中只保留有限小数，所以星型边长越大，误差越大 */

2、心形

（1）效果演示

（2）样式代码

.heart {
    position: relative;
}
.heart::before, .heart::after {
    content: "";
    width: 10px;
    height: 15px;
    border-radius: 10px 10px 0 0;
    background: red;
}
.heart::before {
    transform: rotate(-45deg);
    position: absolute;
    left: -1.76px;
    top: 0;
}
.heart::after {
    transform: rotate(45deg);
    position: absolute;
    left: 1.76px;
    top: 0;
}

/* 泛化：假设 a 为某个控制心型大小的比例系数，那么可以计算得到样式数据如下：
.heart {
    position: relative;
}
.heart::before, .heart::after {
    content: "";
    width: 【1.0a】px;
    height: 【1.5a】px;
    border-radius: 【1.0a】px 【1.0a】px 0 0;
    background: red;
}
.heart::before {
    transform: rotate(-45deg);
    position: absolute;
    left: 【-0.176a】px;
    top: 0;
}
.heart::after {
    transform: rotate(45deg);
    position: absolute;
    left: 【0.176a】px;
    top: 0;
}
说明：上面数据只能作为参考，真正使用的时候还需要根据实际情况进行调整 */

3、钻石

（1）效果演示

（2）样式代码

.diamond {
    width: 50px;
    height: 0px;
    border-bottom: 25px solid ivory;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    position: relative;
}

.diamond::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 75px solid Ivory;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: absolute;
    top: 25px;
    left: -25px;
}

【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】