2016-06-28 69 views
-2

我想解決以下簡單的css問題,但它有一點困難。如何在css中實現幾何div背景形狀

我的儀表板屏幕包含當前具有默認方形背景形狀和兩個字母的一排div。

我需要能夠將每個正方形的背景形狀更改爲表示任務在我們cms中的目標的不同幾何形狀。

這些形狀還需要具有代表狀態的不同顏色。

我需要能夠在不同的形狀和顏色(狀態)之間切換。

你可以看到下面的截圖,說明我需要做什麼。

任何幫助將高度appriciated!

uml shapes

portal preview

+0

創建每個狀態的類名,然後讓每一個背景圖片,並將其添加到正確的類名。讓這個純粹的CSS需要一點點努力。 –

+0

新的Shapes模塊(像'shape-outside'等屬性)可能會有所幫助。 – gcampbell

回答

2

我很抱歉,我不能讓CSS完全一樣的屏幕截圖,但我盡力了。

可以僅使用純CSS創建形狀。請看一看這個片段

#shapes { 
 
    margin-top: 25px; 
 
    display: flex; 
 
} 
 

 
#hexagon { 
 
    width: 25px; 
 
    height: 13.75px; 
 
    background: limegreen; 
 
    position: relative; 
 
} 
 

 
#hexagon:before, #hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-left: 12.5px solid transparent; 
 
    border-right: 12.5px solid transparent; 
 
    left: 0; 
 
} 
 

 
#hexagon:before { 
 
    top: -6.25px; 
 
    border-bottom: 6.25px solid limegreen; 
 
} 
 

 
#hexagon:after { 
 
    bottom: -6.25px; 
 
    border-top: 6.25px solid limegreen; 
 
} 
 

 
#hexagon:before, #hexagon:after, #diamond, #diamond:after, #star, #star-before, #star-after { 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
#diamond { 
 
    border: 12.5px solid transparent; 
 
    border-bottom-color: steelblue; 
 
    position: relative; 
 
    text-indent: -7px; 
 
    top: -15.5px; 
 
} 
 

 
#diamond:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -12.5px; 
 
    top: 12.5px; 
 
    border: 12.5px solid transparent; 
 
    border-top-color: steelblue; 
 
} 
 

 
#circle { 
 
    padding-top: 3px; 
 
    background: turquoise; 
 
    border-radius: 12.5px; 
 
} 
 

 
#square { 
 
    background: orange; 
 
} 
 

 
#trapezoid { 
 
    border-bottom: 25px solid red; 
 
    border-left: 6.5px solid transparent; 
 
    border-right: 6.5px solid transparent; 
 
    height: 0; 
 
    width: 20px; 
 
} 
 

 
#tab { 
 
    height: 25px; 
 
    width: 35px; 
 
    background: lightgray; 
 
    position: relative; 
 
    border-top-right-radius: 25%; 
 
    border-bottom-right-radius: 25%; 
 
} 
 

 
#diamond, #circle, #square, #trapezoid, #tab, #star { 
 
    margin-left: 5px; 
 
} 
 

 
#circle, #square { 
 
    width: 25px; 
 
    height: 20px; 
 
    padding-top: 3px; 
 
} 
 

 
#square, #tab { 
 
    text-align: center; 
 
} 
 

 
#star { 
 
    margin: 5px 0; 
 
    position: relative; 
 
    display: block; 
 
    border-right: 25px solid transparent; 
 
    border-bottom: 17.5px solid gray; 
 
    border-left: 25px solid transparent; 
 
    transform: rotate(35deg); 
 
} 
 

 
#star:before { 
 
    border-bottom: 20px solid gray; 
 
    border-left: 7.5px solid transparent; 
 
    border-right: 7.5px solid transparent; 
 
    position: absolute; 
 
    top: -11.25px; 
 
    left: -16.25px; 
 
    display: block; 
 
    content: ''; 
 
    transform: rotate(-35deg); 
 
} 
 

 
#star:after { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0.75px; 
 
    left: -26.25px; 
 
    border-right: 25px solid transparent; 
 
    border-bottom: 17.5px solid gray; 
 
    border-left: 25px solid transparent; 
 
    transform: rotate(-70deg); 
 
    content: ''; 
 
}
<div id="shapes"> 
 
    <div id="hexagon">ZY</div> 
 
    <div id="diamond">TE</div> 
 
    <div id="circle">TE</div> 
 
    <div id="square">TE</div> 
 
    <div id="trapezoid">TE</div> 
 
    <div id="tab">TE</div> 
 
    <div id="star">TE</div> 
 
</div>

+0

非常感謝@理查德漢密爾頓,這似乎是正確的答案。感謝這個例子,感謝! – alonblack

+0

沒問題!我也想學習如何做到這一點。這也是我的一個項目。我發現這個網站也幫了我一些忙。 https://css-tricks.com/examples/ShapesOfCSS/ –