HTML/CSS/JavaScript（几何形状）的 word smartart 实现

Question

我相信你们中有很多人都知道以下使用 Microsoft Word 创建的 "smart art" 元素：

这个图有没有web实现的框架（纯HTML、CSS、JavaScript）？或者您能想象如何将其实现为 "clean" 网络元素吗？

Answer 1

这里有一个关于如何使用 pure html 来实现的想法。您可以将这个概念包装到时髦的 javascript 函数中以加快处理速度。这个想法很简单 border-radius 圆圈：

注意：仅在 chrome

上测试

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

HTML/CSS/JavaScript（几何形状）的 word smartart 实现

Word smartart realization with HTML/CSS/JavaScript (geometric shapes)

html

javascript

css

ms-word