使用HTML / CSS / JavaScript（几何形状）实现Word smartart实现

Question

我确信你们中有很多人都知道以下元素被创造为＆＃34;智能艺术＆＃34;使用Microsoft Word：

是否有任何用于此图形的Web实现框架（纯HTML，CSS，JavaScript）？或者你能想象这是如何实现这样一个＆＃34;清洁＆＃34;网络元素？

Answer 1

以下是关于如何使用纯HTML执行此操作的想法。你可以将这个概念包装成一个时髦的javascript函数来加快速度。这个想法是简单的边界半径圆：

注意：仅在chrome上测试

http://jsfiddle.net/9m6fbtxL/

.circle1 {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 170px;
    border: 1px solid #4e82bc;
    background-color: #4e82bc;
}

.circle2 {
    position: absolute;
    top: 110px;
    left: 60px;
    width: 220px;
    height: 220px;
    border-radius: 110px;
    border: 2px solid #FFFFFF;
    background-color: #4e82bc;
}

.circle3 {
    position: absolute;
    top: 212px;
    left: 120px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border: 2px solid #FFFFFF;
    background-color: #4e82bc;
}

.textArea1 {
    position: absolute;
    width: 500px;
    height: 100px;
    top: 8px;
    left: 170px;
    background-color: #FFFFFF;
    border: 2px solid #4e82bc;
}

.textArea2 {
    position: absolute;
    width: 500px;
    height: 100px;
    top: 110px;
    left: 170px;
    background-color: #FFFFFF;
    border: 2px solid #4e82bc;
}

.textArea3 {
    position: absolute;
    width: 500px;
    height: 100px;
    top: 212px;
    left: 170px;
    background-color: #FFFFFF;
    border: 2px solid #4e82bc;
}

.textArea4 {
    position: absolute;
    width: 500px;
    height: 16px;
    top: 314px;
    left: 170px;
    background-color: #FFFFFF;
    border: 2px solid #4e82bc;
}

.textArea5 {
    position: absolute;
    width: 500px;
    height: 14px;
    top: 332px;
    left: 170px;
    background-color: #FFFFFF;
    border: 2px solid #4e82bc;
}