纯 CSS 用一个标签绘制图形

2019独角兽企业重金招聘Python工程师标准>>>

看着不方便的可以直接看原文，链接见底部。

1.

<div class="border item2"></div>

.border {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    margin: 30px;
    -webkit-transition: .36s;
    transition: .36s;
}

.item2 {
    border: 60px solid #ccc;
    outline: 60px dotted #fff;
    outline-offset: -59.9px;
    background: #ccc;
}

2.

<div class="border item3"></div>

.item3 {
    width: 120px;
    height: 120px;
    -webkit-clip-path: polygon(0% 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 60%, 65% 60%, 65% 100%, 35% 100%, 35% 60%, 0% 60%);
    clip-path: polygon(0% 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 60%, 65% 60%, 65% 100%, 35% 100%, 35% 60%, 0% 60%);
    background: #5B88CD;
}

3.

<div class="border item4"></div>

.item4 {
    border-width: 50px;
    border-style: dotted;
    border-color: #5c99d6;
    border-radius: 50%;
}

 4.

<div class="border item5"></div>

.item5 {
    border-width: 32px;
    border-style: dotted;
    border-color: #5c99d6;
    background: #ccc;
    border-radius: 50%;
    background-clip: padding-box;
}

参考自：

https://codepen.io/yisi/details/yymGqm/

转载于:https://my.oschina.net/jingyao/blog/983695