CSS画出的图_时间频率图（lofar）-优快云博客

本文介绍如何使用纯CSS绘制各种简单及复杂图形，包括矩形、圆形、三角形等基本形状，以及六角星、五角星和桃心等复杂图案，并提供具体的CSS代码实现。

简单图形

矩形

div{
    width: 100px;
    height: 100px;
    background-color: red;
}

圆形

div{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}

椭圆

div{
    width: 100px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
}

直角三角形

div{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
}

正三角形

div{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-width: 86.6px 50px;
    border-bottom-color: red;
}

平行四边形

div{
    margin-left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
    transform: skew(30deg);
}

梯形

div{
    width: 50px;
    border: 50px solid transparent;
    border-bottom-color: red;
}

复杂图形

六角星

　　两个三角形叠压

div{
    position: relative;
    width: 0;
    border: 50px solid transparent;
    border-width: 50px 43.4px;
    border-bottom-color: red;
}
div:after{
    position: absolute;
    content:"";
    width: 0;
    border: 50px solid transparent;
    border-width: 50px 43.4px;
    border-top-color: red;
    top: 16px;
    left: -42px;
}

六边形

　　两个梯形拼接

div{
    position: relative;
    width: 50px;
    border: 50px solid transparent;
    border-bottom-color: red;
}
div:after{
    position: absolute;
    content:"";
    width: 50px;
    border: 50px solid transparent;
    border-top-color: red;    
    top:50px;
    left: -50px;
}

五角星

　　一个大三角形底部掏掉一个小三角形；两个前面的相同图形叠压

　　经计算，五角星的夹角为36度，若小三角形的侧边为a，则大三角形的侧边为2a(1+sin18)，两个三角形共同的底边为2a(sin54)

.box{
    position: relative;
}
.in{ 
    margin-left: 100px;
    position: relative; 
    width: 0px; 
    border: 10px solid transparent; 
    border-width: 249px 81px;
    border-bottom-color: red; 
    position: absolute;
} 
.in:after{
    content: "";
    position:absolute;
    border: 10px solid transparent;
    border-width: 59px 81px;
    border-bottom-color: white;
    top: 133px;
    left: -81px;
}
.in:last-child{
    top: 100px;
    left: -134px;
    transform: rotate(-73deg);
}

桃心

　　创建一个方形div，分别用css控制div的两个伪元素平移到正方形相邻两边，圆形与边中点重合。最后将总的div旋转45度

<style>
div{
    display:inline-block;
    margin:50px;
    height: 100px;
    width: 100px;
    background-color: red;
    transform: rotate(-45deg);
}
div:before,div:after{
    display:block;
    content:"";
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
    margin-top:-50%;
}
div:after{
    margin-left:50%;
}
</style>