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

Question

I'm sure there are a lot of you knowing the following element created as "smart art" with Microsoft Word:

Is there any framework for web realization of this graphic (pure HTML, CSS, JavaScript)? Or can you imagine how this could be realized as a "clean" web element?

Answer 1

Here's an idea on how to do it with pure html. You can wrap this concept into a snazzy javascript function to speed things up. The idea is simple border-radius circles:

NOTE: only tested on 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;
}