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

1、星形

.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、心形

.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、钻石

.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;
}

4、前进箭头

.forward-arrow {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid red;
    position: relative;
}

.forward-arrow:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid white;
    position: absolute;
    left: -12px;
    top: -8px;
}

5、返回箭头

.backward-arrow {
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-right: 9px solid red;
    transform: rotate(15deg);
    position: relative;
}

.backward-arrow:after {
    content: "";
    width: 12px;
    height: 9px;
    border-top: 3px solid red;
    border-radius: 30px 0 0 0;
    transform: rotate(45deg);
    position: absolute;
    top: -10px;
    left: -6px;
}

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