CSS画几何图形系列

一、圆形

<div style="width: 200px; height: 200px;">
        <div style="width: 100px; height: 100px; background-color: pink; border-radius: 50%;"></div>
</div>

 二、三角形

<div style="width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid red;"></div>

三、画自适应正方形

<div style="width: 50%; height: 50vw;background: red;"></div>

四、画直线

使用hr实现
<hr style="height: 5px; background: red; border:0px"/>

<div style="width:800px; height:1px; padding:0px; background-color:#D5D5D5; overflow:hidden;"></div>

画竖线
<div style="height:800px; width:1px; padding:0px; overflow:hidden; border-right: 1px solid blue;"></div>

五、画扇形

（1）90°的扇形

左上角都是圆角，其余三个角都是直角，

<div style="width: 100px; height: 100px; background-color: red; border-radius: 100px 0 0;"></div>

（2）其他角度的扇形

<div class="shanxing shanxing2">
        <div class="sx1"></div>
        <div class="sx2"></div>
    </div>

<style>
        .shanxing {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: red;
        }
        .shanxing2 .sx1 {
            transform: rotate(-30deg);
            background-color: #fff;
        }
        .shanxing2 .sx2 {
            transform: rotate(-150deg); 
            background-color: #fff;
        }
        .sx1, .sx2 {
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0 100px 200px 0);
            border-radius: 100px;
            background-color: black;
        }
    </style>

http://www.360doc.com/content/19/0403/13/63018409_826158109.shtml